I am using React Kendo grid like this:
<Grid sortable={true}
filterable={true}
onDataStateChange={onDataStateChange}
groupable={true}
reorderable={true}
pageable={true}
data={result}
{...dataState}>
<GridColumn cell={CommandCell} title="Options"/>
<GridColumn field="session_id" title="Session" filter='text'/>
<GridColumn field="sn_zag_id" title="Service" filter='text'/>
</Grid>
The CommandCell looks like this:
const CommandCell = (props) => <MyCommandCell {...props}/>;
const MyCommandCell = (props) => {
return <td className="k-command-cell">
<div style={{marginTop:'2%'}}>
<Button style={{width:'8vw',marginTop:'2%'}}
onClick={()=> alert(props)}>
<FcCancel/>Alert
</Button>
<Button style={{width:'8vw',marginTop:'2%'}}
onClick={()=>toggleDialogPrilog()}>
<AiFillFileAdd/> Add file
</Button></>}
</div>
{ visible &&<Dialog onClose={toggleDialogPrilog} title={"Add file"}>
<Prilog props={props}/>
</Dialog>}
</td>;
};
So, my intention is, when I click on the Button 'Add' in the grid, I want the dialog to open and I want to send props to the 'Prilog' component. Prilog component looks like this:
export default function Prilog ({props}) {
console.log(props);
const [file, setFile] = useState();
const handleSubmit = async(event) =>{
console.log(event);
event.preventDefault()
let resp = await services.uploadSnPrilog(0,props,file.name,file.opis,file.base64);
console.log(resp);
}
const handleSubmit = async(event) =>{
console.log("Hello");
...some logic...
}
return <>
<DialogActionsBar>
<div>
<p>{props.dataItem.sn_zag_id}</p>
<form onSubmit={handleSubmit}>
<button className='appBar-containers' type="submit">
<FaUpload/> Add
</button>
<input type="file" style={{marginTop:'1vh', marginLeft:'1vw'}}></input>
</form>
</div>
</DialogActionsBar>
</>
}
But the thing is, when I click 'Add' on any row in the grid, the console.log in Prilog component logs all the props, from all visible rows, and not the row that I clicked. Also, the
{props.dataItem.sn_zag_id}
writes always the first written 'sn_zag_id' from the first prop that was console logged. On the other hand, if I click 'Alert', it console logs the props from only that row. How can I send only the props of the clicked row to the Prilog component and not all props?