React: Handling the parent event in the child

Question

I'm a new person to the React world. I'm having trouble creating a parent component. I decided to make a universal Box component that would have Actions (like Button ) and a proper component in it.

Sample:

function View(props) {
    return (
        <Box title="Records">
            <Actions>
                <Button icon="plus"  onClick={addHandle} /> // Add new row in MusicRecordsGrid
                <Button icon="minus" onClick={deleteHandle} /> // Delete selected row in MusicRecordsGrid
            </Actions>
            <MusicRecordsGrid />
        </Box>
    );
};

Can you advise me how nicely I can send the information about clicking the button in this case to the MusicRecordsGrid component. Or maybe I should not send the information below, just use forwardRef and handle it in the View component.

I would also like to ask about the reactions between the components

Sample:

function View(props) {
    return (
        <Box className="left" title="Records">
            <Actions>
                <Button icon="plus"  onClick={addHandle} /> // Add new row in MusicRecordsGrid
                <Button icon="minus" onClick={deleteHandle} /> // Delete selected row in MusicRecordsGrid
            </Actions>
            <MusicRecordsGrid />
        </Box>
        <Box className="right" title="Details">
            <MusicRecordsDetailsGrid />
        </Box>
    );
};

Can you advise on how to nicely send information about selected items from MusicRecordsGrid component to MusicRecordsDetailsGrid (should I do it using state?)

Answer 1

If you use react hooks, you can use useState or useReducer

https://ru.reactjs.org/docs/hooks-reference.html#usereducer

     const initialState = {
          count: 0
        };
    
        function reducer(state, action) {
          switch (action.type) {
            case 'add':
              return {
                items: state.item.concat(action.payload)
              };
            case 'delete':
              return {
                items: [...state.items.filter... // do what you want ]
          };
            default:
              throw new Error();
          }
        }
    
    function View(props) {
          const [state, dispatch] = useReducer(reducer, initialState);
    const addHandle = (payload) => {
    dispatch({type: 'add', payload})

}

const deleteHandle = () => {

    dispatch({type: 'delete', (put here Id of item you want to delete)})

}
          return ( 
            <Box className="left" title="Records">
            <Actions>
                <Button icon="plus"  onClick={addHandle} /> // Add new row in MusicRecordsGrid
                <Button icon="minus" onClick={deleteHandle} /> // Delete selected row in MusicRecordsGrid
            </Actions>
    Then you can put your items here

// put here you items
                <MusicRecordsGrid items={items} />
              );
            }

PS Actually this is the React basis, please react about state, props etc. https://reactjs.org/docs/components-and-props.html

Answer 2

If you only need simply pass selected item information to MusicRecordsGrid you can try this. But if you need more than passing data into musicRecordsGrid use Redux .

function View(props) {
    return (
        <Box className="left" title="Records">
            <Actions>
                <Button icon="plus"  onClick={addHandle} /> // Add new row in MusicRecordsGrid
                <Button icon="minus" onClick={deleteHandle} /> // Delete selected row in MusicRecordsGrid
            </Actions>
            <MusicRecordsGrid />
        </Box>
        <Box className="right" title="Details">
            <MusicRecordsDetailsGrid information={selectedData}/>
        </Box>
    );
};

// In MusicRecordsDetailsGrid 
function MusicRecordsDetailsGrid({information}){
    console.log(information);
    return (<><div>{information}</div></>); 
}

Here: https://redux.js.org/faq/reducers#how-do-i-share-state-between-two-reducers-do-i-have-to-use-combinereducers