score:1

Accepted answer

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:

  1. props should not be capitalized when used as a value, only as a type. also i'd recommend to use type props instead of interface props;

  2. in your onclick handler of item component you should call the changeactive method in one of the following ways:

onclick={this.changeactive}

// or

onclick={() => this.changeactive()}
  1. 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
    );
}


Related Query

More Query from same tag