score:1
onclick={() => this.changeactive}
is wrong.
use onclick={this.changeactive}
or onclick={() => this.changeactive()}
score:0
you should do this. key thing is () => this.changeactive
to () => this.changeactive(true)
or whatever you need.
<item htitle="ivory white" onclick={() => this.changeactive(true)} active={ this.state.color ? 'active' : ' ' } text="for the past 75 years, sennheiser has put sound first. the new momentum true." price=" " />
score:0
it will works if you update the code as following onclick={() => this.changeactive} => onclick={() => onclick={() => this.changeactive()}
render() {
return (
<div>
<div classname="box">
<h4 onclick={() => this.changeactive(true)}>choose your finish.</h4>
<div classname="box--vertical">
<item htitle="ivory white" onclick={() => this.changeactive()} active={ this.state.color ? 'active' : ' ' } text="for the past 75 years, sennheiser has put sound first. the new momentum true." price=" " />
<item htitle="matte black" onclick={() => this.changeactive()} active={ this.state.color ? ' ' : 'active' } text="of all of the celestial bodies that capture our attention and fascination as astronomers." price=" " />
</div>
</div> )};
score:0
change onclick={() => this.changeactive}
to onclick={this.changeactive}
in your parent component.
score:1
you have several issues in your code:
props
should not be capitalized when used as a value, only as a type. also i'd recommend to usetype props
instead ofinterface props
;in your onclick handler of
item
component you should call thechangeactive
method in one of the following ways:
onclick={this.changeactive}
// or
onclick={() => this.changeactive()}
- it seems your render method is missing a last
</div>
element. it should look like this:
render() {
return (
<div>
<div classname="box">
<h4 onclick={() => this.changeactive(true)}>choose your finish.</h4>
<div classname="box--vertical">
<item htitle="ivory white" onclick={() => this.changeactive()} active={ this.state.color ? 'active' : ' ' } text="for the past 75 years, sennheiser has put sound first. the new momentum true." price=" " />
<item htitle="matte black" onclick={() => this.changeactive()} active={ this.state.color ? ' ' : 'active' } text="of all of the celestial bodies that capture our attention and fascination as astronomers." price=" " />
</div>
</div>
</div> // the missing tag
);
}
Source: stackoverflow.com
Related Query
- Click on child component React Typescript not working
- React click handler passed to child component is not working
- React - click handler on child component with map not working
- TypeScript React : Call from child component is not working
- Programmatically redirecting inside child component in React JS is not working
- React Router: Route defined in child component not working
- React Grid Layout with data-grid passed down to a child component not working
- React higher order component not working in typescript
- React Router v5: Route defined in child component not working
- React Parent Child component not working
- React types files not working in React TypeScript (.tsx) file - Throwing ESLint errors for React Component
- React Js - Styling innerHTML on component - Not working - Parent styling is overriding child styling
- Passing data from child to parent component not working in react
- React change state from child component not working
- React hooks set functions not working from child component
- Reach Click handler from parent to child component is not working
- Passing the value of a clicked element in a child component into a button in a parent component in react via state lifting not working
- Visual Studio React Typescript webpack-dev-server hot reload not working for component changes
- Handler not working as expected in child component in React
- React Conditional Rendering child on click not working
- Button Click inside anchor tag not working in React Js Component
- OnClick event in React not working in child component
- Typescript React - Styled component conditional styling using prop not working
- selecting child react component under div is not working in app.jsx file
- using useRef for a textbox to handle outside click not working - React functional component
- React re-render parent from child component not working
- React styled component media query not working with child elements?
- Why props is not working with my child component React JS (react native)
- React input value not working in child component
- React Child Component Not Updating After Parent State Change
More Query from same tag
- My menu icon doesn't get clicked whenever I place cursor on it
- Change React Context without triggering a re-render
- How to set the width of Material UI drawer
- Pagination is not getting centered?
- setState() in multiple axios requests resulting in duplicates
- Displaying API calls from nodeJS inside reactJS component
- How to convert this jQuery code to ReactJS code (React, jQuery, HTML, CSS)
- Why isn't React Native Drawer being triggered using React Native Router Flux + Redux?
- Creating like button for multiple items
- Dynamically rendered images in Gatsby
- Correct way to import modern React into WordPress theme?
- ReactJS component onClick not firing own function
- I keep getting an error when using the clarifai 'Demographics" model
- I want to add parameters in div element with React
- use Firestore for storing profile data with "react-redux-firebase"?
- How to use React's props.children for multiple nested components?
- Action not updating reducer when invoked
- How to use link in react-router
- Rendering an Object of arrays of objects ReactJs [RESOLVED]
- How to set mailto into a property of child react.js component
- Wordpress API + React slug
- React return multiple variables from json
- Cannot import semantic-ui-css
- How to add a new json object to array which elements will be rendered as components on a page?
- Last letter not getting set while onChange event
- Cannot read property 'preventDefault' of undefined in react
- Typescript annoying warning on react props
- My else part of add to cart functionality is also putting the new quantity in the cartItems array rather than just increasing quantity of Items
- React Router re-render same component
- React Help Needed - Components not updating when index increases