Unable to toggle state in react

Question

I’m having issues running this code onClick - basically, the way it should function should be for each button to render the names set in the ‘useState’, and then changed to ‘Click on close’ when clicked. What am I doing wrong, any suggestion?

import React, {useState} from 'react'
import { Accordion, Card, Button, Container, Row, Col} from 'react-bootstrap';
const Riddles = props => {
    const [close, setClose] = useState({
        easy: "Easy Riddles",
        medium: "Intermediate Riddle",
        hard: "Hard Riddles"
    });
    const closed = (e) =>{
        if (close.easy === "Easy Riddles"){
            setClose("Click to close")
        } else if (close.medium === "Intermediate Riddle" ) {
            setClose("Click to close")
        } else if (close.hard === "Hard Riddles") {
            setClose("Click to close")
        } else {
            setClose("")
        }
    }
    return (
        <>
        <div className="riddlesection">
        <Container>
            <Row>
                <Col className="riddlegrid" xs={12} sm={12} md={4}>
                <Accordion>
                <Card id="easy">
                    <Card.Header>
                    <Accordion.Toggle id="easy" onClick={closed} value="Easy Riddles" as={Button} variant="link" eventKey="0">
                        {close.easy}
                    </Accordion.Toggle>
                    </Card.Header>
                    <Accordion.Collapse eventKey="0">
                    <Card.Body>Hello! I'm the body</Card.Body>
                    </Accordion.Collapse>
                </Card>
                </Accordion> 
                </Col>
                <Col  className="riddlegrid" xs={12} sm={12} md={4}>
                <Accordion>
                <Card id="medium">
                    <Card.Header>
                    <Accordion.Toggle id="medium" onClick={closed} value="Intermediate Riddles" as={Button} variant="link" eventKey="0">
                    {close.medium}
                    </Accordion.Toggle>
                    </Card.Header>
                    <Accordion.Collapse eventKey="0">
                    <Card.Body>Hello! I'm the bodyHello! I'm the bodyHello! I'm the bodyHello! I'm the bodyHello! I'm the body</Card.Body>
                    </Accordion.Collapse>
                </Card>
                </Accordion> 
                </Col>
                <Col className="riddlegrid" xs={12} sm={12} md={4}>
                <Accordion>
                <Card id="hard">
                    <Card.Header>
                    <Accordion.Toggle id="hard" onClick={closed} value="Hard Riddles" as={Button} variant="link" eventKey="0">
                    {close.hard}
                    </Accordion.Toggle>
                    </Card.Header>
                    <Accordion.Collapse eventKey="0">
                    <Card.Body>Hello! I'm the body</Card.Body>
                    </Accordion.Collapse>
                </Card>
                </Accordion> 
                </Col>
            </Row>
        </Container>
        </div>
        </>
    )
}
export default Riddles;

I tried many ways to put the logic together but can't seem to make it work. Any input will be very much appreciated.

There are many reasons it is not working. First of which is don't use Hooks inside a condition — Shivam Jha
– Shivam Jha, Commented May 22, 2021 at 21:25
@ShivamJha and the OP is doing that... where? All I see is a single call to useState — Jared Smith
– Jared Smith, Commented May 22, 2021 at 21:28

Yosi Leibman · Accepted Answer · 2021-05-22 21:27:32Z

1

you're calling setClose function with a String argument, so it's replacing ALL your object so after the first run you won't have close.easy or close.hard, close will be just simple a string

answered May 22, 2021 at 21:27

Yosi Leibman

3983 silver badges16 bronze badges

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

Comments

Olivier Boissé · Accepted Answer · 2021-05-22 21:35:25Z

0

You can can use the id of your dom element to update the corresponding property in the close object.

const [close, setClose] = useState({
  easy: "Easy Riddles",
  medium: "Intermediate Riddle",
  hard: "Hard Riddles"
});
 
const closed = (e) => {
  const id = e.target.id;
  setClose({
    ...close, 
    [id]: "Click to close"
  });
};

answered May 22, 2021 at 21:35

Olivier Boissé

18.5k7 gold badges54 silver badges70 bronze badges

Comments

Zhang TianYu · Accepted Answer · 2021-05-22 21:34:21Z

0

You should do this.

const closed = (e) =>{
    if (close.easy === "Easy Riddles"){
        setClose({
          easy: "Click to close",
          medium: "Intermediate Riddle",
          hard: "Hard Riddles"
        })
    } 
}

answered May 22, 2021 at 21:34

Zhang TianYu

1,1957 silver badges11 bronze badges

Collectives™ on Stack Overflow

Unable to toggle state in react

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related