При клике кнопки открывание нужной таблицы, реакт

Question

При клике кнопки All должна открываться таблица(которую закомментировал),в отдельном div элементе. Помещаю таблицу в allUsers() c return не работает.

``import React from "react";

class App extends React.Component {
  state = {
    users: []
  }
  componentDidMount() {
    fetch('https://randomuser.me/api?results=20&inc=gender,name,email,phone,picture').then((r) => r.json()).then((r) => {
      this.state.users = r.results
      this.setState({});
    })
  }
  allUsers() {
   return <table className="table table-success">
      <thead>
        <tr>
          <th>Gender</th>
          <th>Name</th>
          <th>Email</th>
          <th>Phone</th>
          <th>Picture</th>
        </tr>
      </thead>
      <tbody>
        {
          this.state.users.map((elm, ind) => {
            return <tr key={ind}>
              <td>{elm.gender}</td>
              <td>{elm.name.title} {elm.name.first}</td>
              <td>{elm.email}</td>
              <td>{elm.phone}</td>
              <td><img src={elm.picture.medium} alt="" /></td>
            </tr>
          })
        }
      </tbody>
    </table>
  }


  render() {
    return <>
      <button className="btn btn-primary mt-3 ms-3" onClick={() => this.allUsers()}>All</button>
      <div>{this.allUsers()}</div>
    </>
  }
}

export default App```

Спасибо

Answer 1

Реализум отображение React компонента по условию клика мышки на кнопку.

Создадим переменную в state и назовем её, ну допусим isShowTable с начальным значением false.

Исправим изменение состояния с this.state.users = r.results на this.setState({users: r.results}).

Нельзя менять состояние React компонента вне функций, которые для этого предназначены

Поменяем обработчик события нажатия кнопки onClick на изменение переменной isShowTable = true

onClick={() => this.setState({isShowTable: true})}

Добавим условие рендера компонента из функции allUsers() по значению isShowTable. Если false, не рендерить, если true рендерить.

<div>{this.state.isShowTable && this.allUsers()}</div>

Полный код вашего компонента, должен выглядеть следующим образом:

import React from "react";

class App extends React.Component {
  state = {
    users: [],
    isShowTable: false,
  }
  componentDidMount() {
    fetch('https://randomuser.me/api?results=20&inc=gender,name,email,phone,picture')
      .then((r) => r.json())
      .then((r) => {
      this.setState({users: r.results});
    })
  }
  allUsers() {
    return <table className="table table-success">
      <thead>
      <tr>
        <th>Gender</th>
        <th>Name</th>
        <th>Email</th>
        <th>Phone</th>
        <th>Picture</th>
      </tr>
      </thead>
      <tbody>
      {
        this.state.users.map((elm, ind) => {
          return <tr key={ind}>
            <td>{elm.gender}</td>
            <td>{elm.name.title} {elm.name.first}</td>
            <td>{elm.email}</td>
            <td>{elm.phone}</td>
            <td><img src={elm.picture.medium} alt="" /></td>
          </tr>
        })
      }
      </tbody>
    </table>
  }


  render() {
    return <>
      <button className="btn btn-primary mt-3 ms-3" onClick={() => this.setState({isShowTable: true})}>All</button>
      <div>{this.state.isShowTable && this.allUsers()}</div>
    </>
  }
}

export default App;

БЛОГ НА HUSL

При клике кнопки открывание нужной таблицы, реакт

Ответы (1 шт):

Реализум отображение React компонента по условию клика мышки на кнопку.