I'm using ReactSuperSelect library for my react app and I've found one moment, that I can't understand.
<ReactSuperSelect datasource={data} onChange={(item) => console.log(item)} />
This console.log will return something like this: [{id: 'id of selected elem', name: 'name of selected elem'}].
But when I'm trying to do the same thing in any other place (I mean not in the scope of ReactSuperSelect component), I'm getting SyntheticBaseEvents object.
So, as I understand, onChange event in ReactSuperSelect is something like a callback function, that returns some value and I can use this value in higher scope (correct me if I'm wrong).
My question is: how can I emulate the same behavior in my components?
For example: <MyComponent onClick={(clickedElement) => console.log(clickedElement)} and get the result like this {id: 'id', name: 'anyName'}.
P.S. I know about clickedElement.target.value, but I wanna get custom response instead of SyntheticBaseEvents
Answer for comments from coglialoro
I have to create such components:
import React from 'react';
const MyComponent = ({ onClick }) => {
const myItem = {
id: 'id',
name: 'anyname',
};
return <button onClick={() => onClick(myItem)}>Click</button>;
};
export default MyComponent;
import React from 'react';
import MyComponent from './MyComponent';
import './style.css';
export default function App() {
return (
<div>
<MyComponent onClick={(clickedElement) => console.log(clickedElement)} />
</div>
);
}