如何在React中的数组onClick中显示特定对象？

Question

Codesandbox link .

I'm trying to accomplish this functionality - when a user clicks on a character on the left, that character's stats will show up on the right.

Currently, I'm pulling in all character information initially using State, in App.js. Each character is an Object, within a big array.

In /components/content.js, I'm mapping the characters and returning them to the screen. This shows everything.

I only want to show each specific character's stats, and only when a user clicks on their specific button on the left.

Any thoughts? Thank you for helping!

Updated code:

import React, { Component } from 'react';
import Intro from '../intro/intro';

class Content extends Component {
render() {

// Grab the 'characters' object from App.js, and assign it to 'this.props'
const { characters } = this.props;

// Filter the chracters and return only whose 'id' belongs to that of '6'
const filteredCharacters = characters.filter(characters => {
  if (characters.id === 6) {
    return (
      <div className="characters">
        <p>Name: {characters.Name}</p>
        <p>ID: {characters.id}</p>
        <p>Job: {characters.Job}</p>
        <p>Age: {characters.Age}</p>
        <p>Weapon: {characters.Weapon}</p>
        <p>Height: {characters.Height}</p>
        <p>Birthdate: {characters.Birthdate}</p>
        <p>Birthplace: {characters.Birthplace}</p>
        <p>Bloodtype: {characters.Bloodtype}</p>
        <p>Description: {characters.Description}</p>
      </div>
    )
  }
});

// Check to see if it logs properly (it does)
console.log(filteredCharacters);

return (
  <div>
    <section className="content">
      {filteredCharacters}
      {/* <Intro
        title="Final Fantasy 7 Character Stats App"
        text="Search and discover the stats for the main characters of the Final Fantasy 7.">
      </Intro> */}
    </section>
  </div>
)
}
}

export default Content;

Answer 1

Selecting a specific object in the array means filtering the array for that object. I would recommend the find() , it's like the filter method except that it only returns one result.

You have to decide how you are going to filter the array, as in, according to what characteristics of the object.

{
    Name: "Cloud Strife",
    Job: "Mercenary",
    Age: 21,
    Weapon: "Sword",
    Height: `5'7`,
    Birthdate: "August 19",
    Birthplace: "Nibelheim",
    Bloodtype: "AB",
    Description: `something something`
  }

Most of your fields are unique so you could use pretty much any field. However they are unique by accident, you could get two character with the same height or name. I recommend adding a new key that is always unique. The simplest way to do that is to give it a timestamp of the moment it was created.

I would also recommend creating a new field in state like selectedCharacter , in the on click handler you then take your array and filter it down to the clicked character charactersArray.find(character => chacter.id === selected.id) . Where selected.id comes from passing the object of the character you click on into the onClick handler.

You then reference the state value of selectedCharacter in your individual character component not the whole array, this will always show the last character clicked on.

Answer 2

Here you go, replace your Content class component with this:

  const Content = ({ characters }) => {

  // pick out the character you want by id
  const character = characters.find(character => character.id === 6);

  return (
    <div className="characters" key={character.id}>
      <p>Name: {character.Name}</p>
      <p>ID: {character.id}</p>
      <p>Job: {character.Job}</p>
      <p>Age: {character.Age}</p>
      <p>Weapon: {character.Weapon}</p>
      <p>Height: {character.Height}</p>
      <p>Birthdate: {character.Birthdate}</p>
      <p>Birthplace: {character.Birthplace}</p>
      <p>Bloodtype: {character.Bloodtype}</p>
      <p>Description: {character.Description}</p>
    </div>
  );
};

I used find() instead of filter() because filter will map over the entire array whereas find will stop when it finds the result you want. Otherwise, it is exactly the same, just a better fit when you only want one result.

I also switched from a class component to a stateless functional component since you are not using any of the classes lifecycle methods.

You really want to be passing in the id selected and not hard coding it, but I didn't change that so that it was less confusing.