How to get value which function calculates while clicking on button

Question

I am clicking on a button , what It should do is trigger a function and add a new property inside object which is inside a large array of multiple objects, and eventually returns a new array , All I want to know is how we can use that new Array returned by that function ?

I am using this function to get triggered to change the array which I am passing it it, but I am not sure how I can get this value back. Sorry in advance for stupid question I am new to this.

const makeAdminPresenter = (collection) => {
        var newTiles = collection?.map( obj => {
            if(obj.userType === "administrator") {
                return {...obj, isAdminPresenting: true}
            }
            return obj;
        });
        console.log('pressed', newTiles)
        return newTiles

    };
    
    var newTiles = useCallback(() => {
         makeAdminPresenter(tiles);
    },[makeAdminPresenter, tiles]) 

    console.log('result',makeAdminPresenter,newTiles  )

I want to use newTiles, any suggestion ?

Answer 1

in your code you should make use of states (using useState when having functional components) to store the state of the tiles. The makeAdminPresenter modifies the tiles and you will have to re-render the component after the tiles are updated. The code snippet below has an example on how this could be done:

export default function Page() {
    const [tiles, setTiles] = React.useState([...]); // The tiles, you probably initialise elsewhere

    const makeAdminPresenter = () => {
        var newTiles = tiles.map(obj => {
            if (obj.userType === "administrator") {
                return {...obj, isAdminPresenting: true}
            }
            return obj;
        });
        console.log('pressed', newTiles)

        setTiles(newTiles); // Update the state so that the component gets re-rendered
    };

    console.log('result', makeAdminPresenter, tiles) // After the button is pressed tiles will be the new tiles
    return (<>
            <button onClick={makeAdminPresenter}></button>
            {tiles.map((tile, i) => (<TileComponent key={i} tile={tile}/>))}
        </>
    )
}

Hope this helps!