Modal rendering and onClick in React

user_13951484 0
Viewed 38

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.

reactjs
1 Answers

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