Modal rendering and onClick in React

Question

I'm kind of new to React and I'm having difficulty in invoking components through onClick event of a button.

Given below is the code segment

function Dev({value}){
    return(
        <Card>
            <CardImg top width="100%" src={value.src} alt="Card image cap" />
            <CardBody>
                <CardTitle className='text-card'>{value.title}</CardTitle>
                <CardText className='text-text'>{value.text}</CardText>
                <Button className='text-button' onClick={(value)=>{
                    return(
                        <div>
                            {value.id ? <Login /> : <Sign />}
                        </div>
                    )
                }}>{value.button}<i class={value.icon} aria-hidden="true"></i></Button>
            </CardBody>
        </Card>
);
}

value.id is either true or false, but either way the onClick is not firing.

The components Login and Sign are actually components consisting of a Modal.

Some help is deeply appreciated.

Returning JSX from the click function doesn't make any sense. What do you want to happen when the user clicks on the button? — Guy Incognito
– Guy Incognito, Commented Nov 17, 2020 at 13:38
Set a state when the button is clicked, show the components when the state is set. Look up state and conditional rendering in the docs. — Guy Incognito
– Guy Incognito, Commented Nov 17, 2020 at 13:43
So updating the state is the only way to render the components? — Nimrod
– Nimrod, Commented Nov 17, 2020 at 13:45
State is the best way to do it, yes. Returning from onClick doesn't work, if it did, where would it be rendered? Would it replace the button? The Component? Get added to the existing JSX somewhere? Basically, there is no logical way for returning JSX from the onClick to work (thankfully it doesn't). So setting a flag in state and conditionally rendering is the way to go. — Brian Thompson
– Brian Thompson, Commented Nov 17, 2020 at 14:19

Pavel Alekseev · Accepted Answer · 2020-11-17 13:57:46Z

2

To solve your problem you should add state for you component and keep something isButtonClicked in it:

function Dev({ value }) {
  const [isButtonClicked, setIsButtonClicked] = useState(false);

  const handleClick = () => setIsButtonClicked(true);

  return (
    <Card>
      <CardImg top width="100%" src={value.src} alt="Card image cap" />
      <CardBody>
        <CardTitle className="text-card">{value.title}</CardTitle>
        <CardText className="text-text">{value.text}</CardText>
        <Button className="text-button" onClick={handleClick}>
          {value.button}
          <i class={value.icon} aria-hidden="true"></i>
        </Button>
        {isButtonClicked && (value.id ? <Login /> : <Sign />)}
      </CardBody>
    </Card>
  );
}

answered Nov 17, 2020 at 13:57

Pavel Alekseev

1,2221 gold badge10 silver badges20 bronze badges

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

Collectives™ on Stack Overflow

Modal rendering and onClick in React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related