почему он не отображал ответ извлечения при нажатии Botton

Question

Что не так в моих Button.js и index.js?После того, как я передаю реквизиты пользователя компоненту панели user = {contact.name} в index.js, он показывает:

"Объекты инвариантного нарушения недопустимы как дочерний элемент React (найдено: объект с ключами {title, first, last}). Если вы хотите отобразить коллекцию дочерних элементов, используйте вместо этого массив. в h2 (созданный Panel) в div (созданный Panel) в div (созданный Panel) в Panel (созданный App) в div (создан App) в div (создан App) в приложении "

как я могу генерировать случайную информацию о пользователе при нажатии кнопки и отображать информацию о данных над кнопкой?

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} user={contact.name}
            />
            <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: ture
    })
  }
  }

  export default Button;

Answer 1

Проверка contact.name Кажется, это объект, и в Panel вы пытаетесь распечатать объект внутри тега h2

<h2 className="user">{user}</h2>

Answer 2

Если вы посмотрите на ошибку, она говорит:

(found: object with keys {title, first, last}). If you meant to render a collection of children, use an array instead. in h2 (created by Panel)

Это означает, что вы пытаетесь визуализировать объект в вашем JSX, который не разрешен.Он находится внутри вашего заголовка в компоненте Panel.Вам нужно будет вынести имя или деструктурировать его дальше {user.first}

<h2 className="user">{user}</h2>

С другой стороны, нет, возможно, просто в этом сообщении, но в вашем компоненте кнопки в вашем дескрипторе у вас может быть опечатка,Должно ли это быть open: true?

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