score:1
Accepted answer
if you want your children to provide state to the parent, then you need to pass down a function for them to call when they are clicked.
so in the parent, you maintain state with:
const [currentsvg, setcurrentsvg] = usestate();
then when you call your child element, pass in a function as a prop.
<item id="1" onclick={(id) => setcurrentsvg(id)} name="svg 1" />
then in your child, take the function out of the props and put it on the click handler of the div that holds your svg. then onclick, call the function that you passed in:
const items = ({ onclick, name, id }) => {
return (
<styledsvgdiv onclick={() => onclick(id)}>
{name}
<svg width="100" height="100">
<circle
cx="50"
cy="50"
r="40"
stroke="green"
strokewidth="4"
fill="yellow"
/>
</svg>
</styledsvgdiv>
);
};
example: https://oh23w.csb.app/
Source: stackoverflow.com
Related Query
- How do I get the id of div wrapper in React when childnodes are the click event target?
- How do you get a button in DIV not call the <div> click event
- how to get the full event object when using RadioGroup in react
- How do I get the value of the div when I click on it?
- how do i toggle the div when click outside of the button in react js?
- How to check when the react components get rendered or rerendered
- React - How to detect when all sub-components of a parent component are visible to the user?
- How to get the react component instance corresponding to event.target element in a click handler?
- How to add arguments to event handler in ES6 React when functions are bound in constructor
- When and how are React lifecycle methods called in the NextJS SSR process?
- How do I get my React TextField to open the number pad when inputting on a mobile device?
- How to optimize React components with React.memo and useCallback when callbacks are changing state in the parent
- How to get key attribute of parent div when button is click in ReactJS
- How to get value of bubble in amcharts when click event triggered
- How to setup sublime 3 with react native so that when you click on the error and it jump to your code?
- How to get the selected value from a radio button group in React where there are multiple groups?
- How to make one table record editable on button click in React when the table record is mapped?
- How to get useForm data in react component when input fields are in child component?
- How can I use useEffect in React to run some code only when the component first mounts, and some other code whenever an event occurs (repeatedly)?
- How to get the time in seconds after click on submit button using React Count Down Timer
- How to get click event in React HLSPlayer?
- React - How to get height of the particular div if you know its class
- how to change background color when I click the button using react hooks
- React Js how to jump whole pages to other pages when click on the navigation button
- how to populate options for a react select by fetching values from an api to be visible when you click on the select box?
- Testing React click event in Jest fails because the Jquery can't be applied - How can I test it?
- How can I get an empty field when I click on the append using the useFieldArray of React-hook-form?
- How to get the TextField value with onclick button event React Material UI
- How to add event listener to the div element accessed with ref using react and typescript?
- How to get React to listen for a click event called in Jquery
More Query from same tag
- How to fix "TypeError: Cannot read property 'map' of undefined" in JavaScript?
- how to modify a specific object at a index using spread operator in react-redux?
- fix label width to use properly the outlined input
- Mouse click and enter keyboard disable after one click in React
- Cookie not being added to session
- Attempting to pass a custom attribute into react router (using v4)
- How to reset state values to default after a condition in REACT?
- suggestion for first and last name initials React hooks
- Memoize function argument in custom hook
- Hooks dependency API call if changes found React
- How can I access the value of this event in react?
- How do I remove the international option in React Phone Number Input?
- How to deal with different variable name convention in backend api and frontend
- Grids using react bootstrap
- Communicate asynchronous loading end to React interface
- Using React Hooks, when I pass down a prop from parent to a child component, the prop in the child component is undefined
- How to Make React.js component listen to a store in Reflux
- how to send request to server with reactjs?
- Maximum update depth warning react
- React getElementById TypeScript
- Only add HoC if certain condition is met in the props
- Expo / Auth0: Can't get PKCE Flow to work - Failed to verify code verifier
- React componentDidUpdate makes infinit API calls on state change
- How to resolve javascript "not a function" error
- How to access external json data via url link in ReactJS
- How to pass a function to SetState callback after updating? (Reactjs)
- NPM weekly downloads is zero
- stop React-select from opening it's menu on right click (onContextMenu)
- How to navigate from one route to another route in ReactJS
- Uncaught TypeError: Object is not a function in fetch API result