score:3
Accepted answer
<img>
knows how to use onClick
. But <OutstandingActionsSummary>
doesn't! In the implementation of <OutstandingActionsSummary>
, you have to specify how to use the property. It should look like:
class OutstandingActionsSummary extends Component {
render() {
return <img onClick={this.props.onClick}/>
}
score:0
In OutstandingActionForm use only {this.props.children} and attach click handler on OutstandingActionsSummary and call its parent OutstandingActionForm to process.
score:1
class OutstandingActionsSummary extends Component {
static defaultProps ={
onClick:function(){}
}
render() {
return (
<img onClick={()=>this.props.onClick()} src={'/assets/notification.jpg'} className="notification-icon"/>
)
}
OutstandingActionsSummary doesnot support onClick,add it.
Source: stackoverflow.com
Related Query
- React component setting the onClick of it's child ... how to make it work for all kinds of children
- How to pass input values from a child Form component to the state of its parent component for submission with react hooks?
- How is an argument for a callback in React being passed from the child component to the parent component?
- How can I make sure a React parent component loads data before its child component mounts?
- How to make an http call in parent component to setState and then send the state to all child components?
- Toggle active class for the child or its relevant siblings onClick in React
- How can I make a parent component be the label of its child component?
- How to adjust the onClick event of react.children when child is a react component not a DOM element
- React onClick method sets variable to true but only for a second when the page reloads - how to make changes permanent?
- How to make a child React component show for a certain amount of time?
- How to get all the child elements inside a component in unit test using react and enzyme?
- How can I unset an active class on each child component while setting it to active for the clicked child
- How do I make my TableData react component reusable onClick when its only posting one under my table?
- How to write a Jest-enzyme test case for code in React useEffect whose dependencies are updated in its child component
- How to split all import statements of a lazy loaded child component from the main bundle file in react (using webpack 4)
- How to make a react class component retain its state after login and change available routes based on the state currently available in the component?
- How to use onClick event to pass the props from child component to parent component React Hooks
- React: how to make one element react on change with the change of its child element?
- How do I wrap a React component that returns multiple table rows and avoid the "<tr> cannot appear as a child of <div>" error?
- Figuring out how to mock the window size changing for a react component test
- How to make the whole Card component clickable in Material UI using React JS?
- how to make material data grid width to fill the parent component in react js
- React - How to detect when all sub-components of a parent component are visible to the user?
- How to make the GridList component in React Material-UI responsive
- How to make onMouseLeave in React include the child context?
- If the props for a child component are unchanged, does React still re-render it?
- react - how do I get the size of a component child elements and reposition them
- Adding a click handler to React children for methods on the child component
- Changing the CSS for a React component has effect on all other pages
- How do I pass all state variables inside react hooks to my child component
More Query from same tag
- Getting error as 'user cannot publish stream' while connecting to live stream
- React-Router Tabs component mounting before data is fetched
- Using React I am trying to produce three buttons that represent the three collections, and when clicked will take you to that collection of cards
- How to rerun css3 animations in react js
- Converting string to Array (Aggregate mongodb)
- Why does React protected route works for the 2nd time with Recoil state
- ReactJs component structure - Form inside modal
- Import ol-ext to a React - Open Layers 6 project
- GET_FAILURE in reducer test returns wrong in received
- How to setup gulp browser-sync for a node / react project that uses dynamic url routing
- React bootstrap overlaytrigger throwing a warning about unique key in iterator
- Modal works after second click
- State variable inside a function defined within useEffect hook is not updating when value changes
- React.addons.TestUtils.Simulate.scroll is not working
- What is the Proptype for HTMLDocument
- Populate html table with javascript array of array data?
- How to handle Typescript Generics when using styled function from '@mui/material/styles'
- React routing in not working in react js?
- Dynamic menu tabs in ReactJS
- Delete default header for Contentful CreateClient API request
- Pass props locally with React-Router's #createElement
- Node js - React : Fetching API request does not return any data
- React Component errors (Input)
- How to keep an app fullscreen on iOS Safari after screen orientation changes
- How to pass a function from a component to another component in react
- Get WooCommerce product URL based featured_image in WP Rest API
- creating new force graph with react+ts and d3
- How to render a d3.js map inside of a React component?
- setState nested object in a map function
- Property "handle" does not exist on type "undefined" - react context and typescript