How to handle React props correctly

Question

I posted this here because I am relatively new to React and didn't know what exactly should I google. In my React project, I have a kendo grid that has a custom column named OPTIONS, like this:

 <Grid onDataStateChange={onDataStateChange}
            data={result}
            {...{skip:0, take:13}}>
            <GridColumn cell={CommandCell} title="Options"/>
            <GridColumn field="session_id" title="Session" filter='text'/>
            <GridColumn field="sn_zag_id" title="Service" filter='text'/>

The Option column is defined like this:

const [visible2, setVisible2] = useState(false);
const [snZagId, setSnZagId] = useState();

const toggleDialogPrilog = (props) => {
    setVisible2(!visible2);
    setSnZagId(props.dataItem.sn_zag_id)
  }

const CommandCell = (props) => <Options {...props}/>

const Options= (props) => {
  return <td className="k-command-cell">
  <div style={{marginTop:'2%'}}>
       <Button style={{width:'8vw',marginTop:'2%'}}
        onClick={()=>toggleDialogPrilog(props)}>
        Add
        </Button></>}
  </div>
  { visible2 && 
       <Dialog onClose={()=> toggleDialogPrilog()} title={"Add"} style={{width:'50%'}}>
    <Prilog snZagId={snZagId}/>
    </Dialog>
  }
  </td>;}

So, In the option column I have a button ADD that, when it's clicked, opens a Dialog with PRILOG component inside it. The grid that I am talking about is big, made up of pages of 13 rows. Everything works perfectly, so when I click on the Add button, the dialog is open with custom material for that row. But the thing is, if I open the console/inspect, I can see that when I click add, 13 dialogs are open at the same time:

I am aware to some point that when I click Add, all dialogs are rendered bcz I send props, but I don't know how to stop it. In other words, how can I modify my code so that only one(1) dialog opens when I click Add?

Answer 1

I managed to solve the problem somehow, but I don't know what exactly is the difference. Instead of putting the Options component in the same jsx file, I made another component named SessionOptions like this:

Session.jsx:

import SessionOptions from '../../Popup/SesijaOpcije';
...
const CommandCell = (props) => <SessionOptions props={props}/>;
...

SessionOptions.jsx:

...
export default  function SessionOptions({props}) {
...
  return <td className="k-command-cell">
  <div style={{marginTop:'2%'}}>
       <Button style={{width:'8vw',marginTop:'2%'}}
        onClick={()=>toggleDialogPrilog(props)}>
        Add
        </Button></>}
  </div>
  { visible2 && 
       <Dialog onClose={()=> toggleDialogPrilog()} title={"Add"} style={{width:'50%'}}>
    <Prilog snZagId={snZagId}/>
    </Dialog>
  }
  </td>;}

And now it opens just one dialog. The only difference that I clearly see is in sending the props

//Before:
const CommandCell = (props) => <Options {...props}/>

//After:
const CommandCell = (props) => <SessionOptions props={props}/>;

The first one is property spread notation, and the second one is...? Can anybody explain the difference. If anybody could clearify more.