Click on child component React Typescript not working

Question

I have a problem with React and Typescript and it will be nice if I get some help from you guys!

I'm trying to assign an onclick event to my child box component but it isn't working, it doesn't trigger any error, just plainly doesn't work.

This his is the parent:

    changeActive = (issue: boolean) => {
      console.log(issue);
      this.setState({ color: true });
    }

    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> )};

And this is the child element:

import * as React from "react";

interface Props { active: string, htitle: string, text: string, price: string, onClick: (event: React.MouseEvent<HTMLDivElement>) => void };


export function Item(Props: Props) {
    return (
        <div className={`item ${Props.active}`} onClick={Props.onClick}>
          <div>
            <span>{Props.htitle}</span>
              {Props.text !== " " ? <p>{Props.text}</p>: ""}
          </div>
          {Props.price !== " " ? <span>+${Props.price}</span>: "" }
        </div>
      );
}

export default Item;

I'm certainly at loss here, as I'm new to react and typescript and I will like there is no error on this he execution.

Mark · Accepted Answer · 2021-06-06 09:41:30Z

1

onClick={() => this.changeActive} is wrong.

Use onClick={this.changeActive} or onClick={() => this.changeActive()}

answered Jun 6, 2021 at 9:41

Mark

4957 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dalvenjha Over a year ago

Thank you! For some reason it didn't worked like that before, but now it's working like a charm! Thanks again!!

micnic · Accepted Answer · 2021-06-06 09:50:33Z

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 use type Props instead of interface Props;
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()}

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
    );
}

Zhang TianYu · Accepted Answer · 2021-06-06 09:41:53Z

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=" " />

answered Jun 6, 2021 at 9:41

Zhang TianYu

1,1957 silver badges11 bronze badges

Comments

Reinis · Accepted Answer · 2021-06-06 09:42:46Z

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> )};

Majid M. · Accepted Answer · 2021-06-06 09:44:17Z

0

Change onClick={() => this.changeActive} to onClick={this.changeActive} in your parent component.

answered Jun 6, 2021 at 9:44

Majid M.

4,9941 gold badge16 silver badges35 bronze badges

Collectives™ on Stack Overflow

Click on child component React Typescript not working

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related