I want to display the details of each existing team with buttons












0












$begingroup$


This component i already create by react-js .



{teams.length ? (
<Container>
<Row>
<Col xs="12" sm="12">
<h1 className="title-club">{`${this.props.match.url}`}</h1>
</Col>
{teams.map(datum => {
return (
<Col xs="12" sm="6">
<div className="club-item">
<h3>{datum.name}</h3>
<Button
className="button-club"
type="button"
onClick={this.toggle}
>
Detail
</Button>
<Collapse isOpen={this.state.collapse}>
<Card>
<CardBody>
Anim pariatur cliche reprehenderit,
enim eiusmod high life accusamus terry richardson ad squid. Nihil
anim keffiyeh helvetica, craft beer labore wes anderson cred
nesciunt sapiente ea proident.
</CardBody>
</Card>
</Collapse>
</div>
</Col>
);
})}
</Row>
</Container>
) : (
...


and i want if we click the red button detail,
enter image description here



then the accordion from reactstrap actived and showing the detail from every football team. enter image description here










share|improve this question









New contributor




rahmandika haekal is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.







$endgroup$

















    0












    $begingroup$


    This component i already create by react-js .



    {teams.length ? (
    <Container>
    <Row>
    <Col xs="12" sm="12">
    <h1 className="title-club">{`${this.props.match.url}`}</h1>
    </Col>
    {teams.map(datum => {
    return (
    <Col xs="12" sm="6">
    <div className="club-item">
    <h3>{datum.name}</h3>
    <Button
    className="button-club"
    type="button"
    onClick={this.toggle}
    >
    Detail
    </Button>
    <Collapse isOpen={this.state.collapse}>
    <Card>
    <CardBody>
    Anim pariatur cliche reprehenderit,
    enim eiusmod high life accusamus terry richardson ad squid. Nihil
    anim keffiyeh helvetica, craft beer labore wes anderson cred
    nesciunt sapiente ea proident.
    </CardBody>
    </Card>
    </Collapse>
    </div>
    </Col>
    );
    })}
    </Row>
    </Container>
    ) : (
    ...


    and i want if we click the red button detail,
    enter image description here



    then the accordion from reactstrap actived and showing the detail from every football team. enter image description here










    share|improve this question









    New contributor




    rahmandika haekal is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
    Check out our Code of Conduct.







    $endgroup$















      0












      0








      0





      $begingroup$


      This component i already create by react-js .



      {teams.length ? (
      <Container>
      <Row>
      <Col xs="12" sm="12">
      <h1 className="title-club">{`${this.props.match.url}`}</h1>
      </Col>
      {teams.map(datum => {
      return (
      <Col xs="12" sm="6">
      <div className="club-item">
      <h3>{datum.name}</h3>
      <Button
      className="button-club"
      type="button"
      onClick={this.toggle}
      >
      Detail
      </Button>
      <Collapse isOpen={this.state.collapse}>
      <Card>
      <CardBody>
      Anim pariatur cliche reprehenderit,
      enim eiusmod high life accusamus terry richardson ad squid. Nihil
      anim keffiyeh helvetica, craft beer labore wes anderson cred
      nesciunt sapiente ea proident.
      </CardBody>
      </Card>
      </Collapse>
      </div>
      </Col>
      );
      })}
      </Row>
      </Container>
      ) : (
      ...


      and i want if we click the red button detail,
      enter image description here



      then the accordion from reactstrap actived and showing the detail from every football team. enter image description here










      share|improve this question









      New contributor




      rahmandika haekal is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.







      $endgroup$




      This component i already create by react-js .



      {teams.length ? (
      <Container>
      <Row>
      <Col xs="12" sm="12">
      <h1 className="title-club">{`${this.props.match.url}`}</h1>
      </Col>
      {teams.map(datum => {
      return (
      <Col xs="12" sm="6">
      <div className="club-item">
      <h3>{datum.name}</h3>
      <Button
      className="button-club"
      type="button"
      onClick={this.toggle}
      >
      Detail
      </Button>
      <Collapse isOpen={this.state.collapse}>
      <Card>
      <CardBody>
      Anim pariatur cliche reprehenderit,
      enim eiusmod high life accusamus terry richardson ad squid. Nihil
      anim keffiyeh helvetica, craft beer labore wes anderson cred
      nesciunt sapiente ea proident.
      </CardBody>
      </Card>
      </Collapse>
      </div>
      </Col>
      );
      })}
      </Row>
      </Container>
      ) : (
      ...


      and i want if we click the red button detail,
      enter image description here



      then the accordion from reactstrap actived and showing the detail from every football team. enter image description here







      javascript react.js jsx






      share|improve this question









      New contributor




      rahmandika haekal is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.











      share|improve this question









      New contributor




      rahmandika haekal is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.









      share|improve this question




      share|improve this question








      edited 2 mins ago









      chiril.sarajiu

      1032




      1032






      New contributor




      rahmandika haekal is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.









      asked 13 mins ago









      rahmandika haekalrahmandika haekal

      12




      12




      New contributor




      rahmandika haekal is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.





      New contributor





      rahmandika haekal is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.






      rahmandika haekal is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.






















          0






          active

          oldest

          votes











          Your Answer





          StackExchange.ifUsing("editor", function () {
          return StackExchange.using("mathjaxEditing", function () {
          StackExchange.MarkdownEditor.creationCallbacks.add(function (editor, postfix) {
          StackExchange.mathjaxEditing.prepareWmdForMathJax(editor, postfix, [["\$", "\$"]]);
          });
          });
          }, "mathjax-editing");

          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "196"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: false,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: null,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });






          rahmandika haekal is a new contributor. Be nice, and check out our Code of Conduct.










          draft saved

          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f213498%2fi-want-to-display-the-details-of-each-existing-team-with-buttons%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown

























          0






          active

          oldest

          votes








          0






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes








          rahmandika haekal is a new contributor. Be nice, and check out our Code of Conduct.










          draft saved

          draft discarded


















          rahmandika haekal is a new contributor. Be nice, and check out our Code of Conduct.













          rahmandika haekal is a new contributor. Be nice, and check out our Code of Conduct.












          rahmandika haekal is a new contributor. Be nice, and check out our Code of Conduct.
















          Thanks for contributing an answer to Code Review Stack Exchange!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          Use MathJax to format equations. MathJax reference.


          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f213498%2fi-want-to-display-the-details-of-each-existing-team-with-buttons%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          Popular posts from this blog

          How to make a Squid Proxy server?

          Is this a new Fibonacci Identity?

          Touch on Surface Book