const [fullProductCostingDataState, setFullProductCostingDataState] = useState([]);
// update of state done here
{fullProductCostingDataState.map((item, index) => {
return (
<p key={index}>{item["materialName"]}</p>
)
})}
Sorry I know this is a potentially stupid question but I know the .map function is only rendered once and then even if the state changes the data is not re-mapped to the page but how do I solve this as I need it to list the items in the state. All replies I found online mention using render() but I'm using a functional component so don't have render, can I use hooks to force it to update or is .map completely the wrong thing to be using for this.
function ItemRow(props) {
let data = props.fullData;
let newItem = { "id": props.id, "materialName": props.name, "value": totalPrice }
data.push(newItem);
props.setFullData(data);
}
That's a watered-down version of how I'm updating the state (the full version has a lot of if statements in to check for various things and remove duplicates), guessing I'm mutating it?
const [fullProductCostingDataState, setFullProductCostingDataState] = useState([]);
// update of state done here
useEffect(()=>{},[fullProductCostingDataState]) // this will solve your issue
{fullProductCostingDataState?.map((item, index) => {
return (
<p key={index}>{item["materialName"]}</p>
)
})}
Your issue will be solved as useEffect re-render the page when the state is changed. Now you just have to update the state.
Solved it thanks to everyone's help on here.
Changed let data = props.fullData;
to
let data = [...props.fullData];
then edited the data variable before calling the set state function using the data variable :)
Thanks everyone,