Как ReactJS отображает получение ответа на клике

Question

Я пытаюсь сгенерировать случайную информацию о пользователе при нажатии кнопки и отобразить информацию над кнопкой.В ProfilePanel.js я создал аватар и пользовательские константы, которые будут использоваться для отображения информации.В index.js константа аватара работает для этого, так как ей не нужно использовать кнопку.однако для постоянной пользователя это не работает.В приведенном ниже коде я извлекаю данные API для отображения имени пользователя, но он ничего не показывает, я не уверен, где это неправильно, что-то не так в Button.js или index.js.и как я могу это исправить.Кто-нибудь может мне помочь?Спасибо.

<Button title="name" >
<p key={contact.name} user={contact.name}></p>
</Button>

index.js

import React, { Component } from "react";
import ReactDOM from "react-dom";
import Panel from "./ProfilePanel";
import axios from 'axios';
import './index.css';
import Button from './Button';

const url = 'https://randomuser.me/api/';

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      contacts: []
    }
  }

  componentDidMount() {
    this.fetchdata();
  }

  fetchdata() {
    axios.get(url)
      .then(res => {
        console.log(res);
        this.setState({ contacts: res.data.results});
      });
  }

  render(){
    const {contacts} = this.state;
    return (
      <div className="panel">
          {contacts.map(contact => (
          <div class="panel">
            <Panel
              key={contact.picture} avatar={contact.picture.medium}
            />
            <li class="flex-container">
              <Button title="name" >
                <p key={contact.name} user={contact.name}></p>
              </Button>
              <Button title="location" onClick={this.fetchdata}> 
              </Button>
              <Button key={contact.email} title="email">
              </Button>
              <Button key={contact.phone} title="phone">
              </Button>
              <Button key={contact.login.password} title="password">
              </Button>
            </li>
          </div>
            ))}
      </div>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById("root")
);

ProfilePanel.js

import React, { Component } from "react";
import PropTypes from "prop-types";
import './index.css';
import Button from './Button';

const style={
  borderRadius: 150,
  margin: 15,
}

class Panel extends Component {

  render() {
    const { avatar,  user } = this.props;
    return (
      <div className="Panel">
        <div class="panels">
          <div className="avatar">
            <img src={avatar} class="imageStyle" alt="" width={"200%"} height={"auto"}/>
          </div>
        </div>
        <div class="center">
          <h2 className="user">{user}</h2>
        </div>

      </div>
    );
  }
}

export default Panel;

Button.js

import './index.css';
import React, { Component } from 'react';

class Button extends Component {

  constructor(props) {
    super(props);
    this.state = {
      open:false,
    };
  }

  render() {
    const { title } = this.props;
    const {open} = this.state;
    return (
      <button className={` ${open ? 'open' : ''}`} 
      class='button' onClick={(e) => this.handleClick(e)}>
        <div className="panel-heading">
          <h2 class='buttoncenter'>{title}</h2>
        </div>
      </button>
    );
  }

  handleClick(e) {
    e.preventDefault();
    this.setState({
      open: this.state.open
    })
  }
  }

  export default Button;

Answer 1

Вам необходимо передать информацию о пользователе в index.js.Я думаю, что вы пропустили передачу пользовательского реквизита компоненту панели, чтобы он отображал только аватар.Не передавая реквизиты пользователей, вы пытаетесь провести там деструктуризацию в компоненте панели.

//index.js should be like this

render(){
    const {contacts} = this.state;
    return (
      <div className="panel">
          {contacts.map(contact => (
          <div class="panel">
            <Panel
              key={contact.picture} user={contact.name} avatar={contact.picture.medium}
            />
            <li class="flex-container">
              <Button title="name" >
                <p key={contact.name} user={contact.name}></p>
              </Button>
              <Button title="location" onClick={this.fetchdata}> 
              </Button>
              <Button key={contact.email} title="email">
              </Button>
              <Button key={contact.phone} title="phone">
              </Button>
              <Button key={contact.login.password} title="password">
              </Button>
            </li>
          </div>
            ))}
      </div>
    );
  }

Answer 2

Вы не меняете состояние при нажатии на ручку.Вам необходимо установить значение true;

handleClick(e) {
    e.preventDefault();
    this.setState({
     open: true
   })
}