CODEWITHSUNDEEP
javascriptreactjs
UnskilledCoder
UnskilledCoder

Reputation: 312

Using property of a control inside the same control

It is an in-house accordion control but I think mostly based on React-Bootstrap control. So I have this:

<AccordionItem
    id={0}
    onClick={this.handleAccordionClick}
    open={this.props.id === this.state.accordionIdClicked}
    title="Title of First Item"
  >
    Some content goes here inside this accordion item.
  </AccordionItem>

And then I have my click handler and the state:

  state = {
    accordionIdClicked: 0,
  };

  handleAccordionClick = (id) => {
    console.log("id clicked was: ", id); // this shows the correct Id
    this.setState({ accordionIdClicked: id });
  };

So my question is am I doing it wrong for closing and opening the accordion item? If I manually hard code it to true or false I see it is working but not with my conditional statement below:

open={this.props.id === this.state.accordionIdClicked}

Upvotes: 0

Views: 45

Answers (1)

U&#233;slei Suptitz
U&#233;slei Suptitz

Reputation: 400

I am Brazilian and therefore I speak Portuguese, but I will use the translator to try to help you.

From what I read about your component, you need to control which AccordionItem is open by passing the activeKey props to the parent Accordion element. I found this here .Something like this:

 <Accordion activeKey="0">
      <Card>
        <Card.Header>
          <ContextAwareToggle eventKey="0">Click me!</ContextAwareToggle>
        </Card.Header>
        <Accordion.Collapse eventKey="0">
          <Card.Body>Hello! I'm the body</Card.Body>
        </Accordion.Collapse>
      </Card>
      <Card>
        <Card.Header>
          <ContextAwareToggle eventKey="1">Click me!</ContextAwareToggle>
        </Card.Header>
        <Accordion.Collapse eventKey="1">
          <Card.Body>Hello! I'm another body</Card.Body>
        </Accordion.Collapse>
      </Card>
    </Accordion>

In your case it would look something like this:

class App extends Component {
  state = {
    accordionIdClicked: 0,
  };

  handleAccordionClick = (id) => {
    console.log("id clicked was: ", id); // this shows the correct Id
    this.setState({ accordionIdClicked: id });
  };

  render() {
    return (
      <Accordion activeKey={this.state.accordionIdClicked}>
        {[0, 1, 2].map((n) => (
          <MyAccordionItem id={n} onClick={this.handleAccordionClick} />
        ))}
      </Accordion>
    );
  }
}

const MyAccordionItem = ({ id, onClick }) => (
  <AccordionItem id={id} onClick={onClick} title="Title of First Item">
    {id} item
  </AccordionItem>
);

Upvotes: 1

Related Questions