I have such a problem. I made a request for an API, received this and displayed on the page. Now I want to make it so that next to each category was the button Show and when clicked, a modal window opens. But when I want to create this button the error takes off.
Here is the code
import React, {Component} from 'react'; import {Table, Button, Modal, ModalHeader, ModalBody, ModalFooter} from 'reactstrap'; import './Category.css'; function CategoryData(props) { const category = props.category; return ( <div> <Table> <thead> <tr> <th>ID</th> <th>Name</th> <th>Status</th> <th>Actions</th> </tr> </thead> <tbody> {category.map(item => // Атрибут key используется react для обеспечения соответствия элементов dom объектам данных. <tr key={item.id}> <th>{item.id}</th> <th>{item.name}</th> {(item.status === '1') ? <th> Active </th> : <th> Is active </th> } <div> <Button color="danger" onClick={this.toggle}>Показать</Button> <Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}> <ModalHeader toggle={this.toggle}>Modal title</ModalHeader> <ModalBody> Lorem ipsum </ModalBody> <ModalFooter> <Button color="primary" onClick={this.toggle}>Do Something</Button>{' '} <Button color="secondary" onClick={this.toggle}>Cancel</Button> </ModalFooter> </Modal> </div> </tr> )} </tbody> </Table> </div> ); } class Category extends Component { constructor(prop) { super(prop); // установить начальное состояние this.state = {category: [], modal: false}; this.toggle = this.toggle.bind(this); } toggle() { this.setState({ modal: !this.state.modal }); } // метод жизненного цикла componentDidMount() { // fetch + api fetch('http://localhost:3004/category') .then(data => data.json()) .then((data) => { // установить состояние с помощью this.setState this.setState({category: data}); }); } render() { return ( <CategoryData category={this.state.category}/> ); } } export default Category; And a mistake
TypeError: Cannot read property 'toggle' of undefined
