CODEWITHSUNDEEP
javascriptreactjs
user12954623
user12954623

Reputation:

Unable to toggle state in react

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.

Upvotes: 0

Views: 46

Answers (3)

Olivier Boiss&#233;
Olivier Boiss&#233;

Reputation: 18083

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

Upvotes: 0

Zhang TianYu
Zhang TianYu

Reputation: 1195

You should do this.

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

Upvotes: 0

Yosi Leibman
Yosi Leibman

Reputation: 388

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

Upvotes: 1

Related Questions