CODEWITHSUNDEEP
javascriptreactjs
Matt M
Matt M

Reputation: 515

React .map not re-rendering on state change in functional component

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?

Upvotes: 1

Views: 6172

Answers (2)

Matt M
Matt M

Reputation: 515

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,

Upvotes: 3

Shah Vipul
Shah Vipul

Reputation: 747

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.

Upvotes: 0

Related Questions