Bdtjtk

I want to present a few different types of information, in separate cards. Each Card, needs to be able to open and close when clicking on the Header.

Up until now, I wrote this piece of code:

import React, { Component } from 'react';

import { PropTypes } from 'prop-types';



// Importing Styles

import './styles.scss';



class CardToggle extends Component {

  static propTypes = {

    title: PropTypes.string.isRequired

  };



  constructor(props) {

    super(props);



    this.state = {

      isOpen: false

    };



    this.handleToggleClick = this.handleToggleClick.bind(this);

  }



  handleToggleClick = () => {

    this.setState({

      isOpen: !isOpen

    });

  };



  render() {

    const { title } = this.props;

    return (

      <div className="card my-2 border-0 rounded-0">

        <div className="card-body d-flex">

          <h4>

            <a className="text-secondary" href="">

              {title}

            </a>

          </h4>

        </div>

      </div>

    );

  }

}



export default CardToggle;

I have a few problems though. There is an error, regarding handleToggleClick not being defined. Also, every component I use inside this component is not being placed inside the card body: It is placed underthing...

So, I need to actually place the content of the component I want to make appear and disappear inside the component, and make the collapse component work.

I am using pure Bootstrap 4 classes, for cards and header and text, and I want to use pure react for the functionality of open/close....

Here is an example component I want to insert into card component:

import React, { Component } from 'react';

import CardToggle from '../CardToggle';



import { ThePermissions } from '../../constants';



class Permissions extends Component {

  render() {

    return (

      <div>

        <CardToggle title="Permissions" />

        <button className="btn btn-primary">Submit</button> // From 

         here it is outside the card

        <div>

        More Content here

        </div>

      </div>

    );

  }

}



export default Permissions;

Can anyone give me a hand. I don't want to use a library and I want the component to be reusable. I also want to handle additional logic regarding show/hide, in the main overview screen which is already huge.

If you want to see that as well, just ping me.

1.For the error of undefined, instead of

handleToggleClick = () => {

    this.setState({

        isOpen: !isOpen

    });

};

try

handleToggleClick() {

    this.setState({

        isOpen: !isOpen

    });

}

2.for the content not appearing inside the component try:

render() {

    const { title, children } = this.props;

    return (

        <div className="card my-2 border-0 rounded-0">

        <div className="card-body d-flex">

            <h4>

            <a className="text-secondary" href="">

                {title}

            </a>

            </h4>

            <div className="/*some class*/">

                 {children} // this is where the content will be shown 

            </div>

        </div>

        </div>

    );

}