0

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 ?

Curious_guy
  • 161
  • 11
  • I am not really sure what the question is, are you clicking on a specific element in this array and what value do you want to return exactly? – rowan-vr Dec 19 '22 at 20:38
  • 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 objects, and returns a new array , All I want to know is how we can use that new Array returned by that function ? – Curious_guy Dec 19 '22 at 20:42

1 Answers1

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!

rowan-vr
  • 136
  • 11
  • Thank you this sounds perfect , although do you know if we can just have the video tiles be inside a useMemo that changes based on that button press ? is that possible ? – Curious_guy Dec 19 '22 at 21:00
  • 1
    @Curious_guy, I'm not too familiar with useMemo however it doesn't seem like it is what you need here, the makeAdminPresenter operation does not seem like a heavy computation, which is what useMemo is made for. If you need to make an API call or such to let the server know, what I always do is setState after it's completed using either a .then or async await, hope this helps! – rowan-vr Dec 19 '22 at 21:05