How can I refresh React Functional component?

Question

Now I'm using React Functional Component and going to display about variable.

let bundles_data = [];
const SelectExistNFCType = (props) => {
   const setAdd = async () => {
       ...
        data.map((value, index) => {
            bundles_data.push(value)
        })
        ...
    }
}

I tried to display bundles_data's value when calling setAdd function. Now the bundles_data is changing, but can't display immediately. Is there any solution?

Answer 1

Please the state of React.

const SelectExistNFCType = (props) => {
   const [bundlesData, setBundlesData] = React.useState([]);
   const setAdd = async () => {
        ...
        data.map((value, index) => {
            setBundlesData([...bundlesData, value]);
        })
        ...
     }
}