如何在 JSX 代码中打印数组的所有元素（作为来自父状态的道具传递）？

Question

I am new to React and I am trying to navigate the JSX syntax, combined with state/ props and pure Javascript.

I am passing props from the parent component (App) to the child component (Character). One of the props is an array of numbers which I am trying to print to the page, inside a paragraph, when the child component gets rendered. I figured it out how to print all other props (which are either strings or numbers) but I can't find a solution for the seasons array. I can print all the elements of the array to the console using a forEach loop but I have no idea how to integrate the result into JSX. I would like for the last paragraph of the child component to read

Seasons: 1, 2, 3

or how many numbers the array has.

EDIT: I would like for each printed season to be a separate element (a link for example) and not to transform the array into a single string which reads "1, 2, 3" (like when using join(,).

Here is my code for the App component:

import React from 'react';

const Characters = (props) => {

    // we use destructuring by storing the array of objects into the characters const
    const { theCharacters } = props;

    const charactersList = theCharacters.map(character => {
        return (
            <div className="character" key={character.id}>
                <p>On screen name: {character.screenName}</p>
                <p>Short description: {character.description}</p>
                <p>Real name: {character.realName}</p>
                <p>Apparitions: {

                    character.seasons.forEach(season => {
                         return season; //this here doesn't do anything
                        //console.log(season);
                    })}</p>
            </div>
        )
    })

        return (
          <div className="character_list">
            {charactersList}
         </div>
              )
    }

export default Characters;

And this is the code for the Character component:

 import React from 'react'; const Characters = (props) => { // we use destructuring by storing the array of objects into the characters const const { theCharacters } = props; const charactersList = theCharacters.map(character => { return ( <div className="character" key={character.id}> <p>On screen name: {character.screenName}</p> <p>Short description: {character.description}</p> <p>Real name: {character.realName}</p> <p>Apparitions: { character.seasons.forEach(season => { return season; //this here doesn't do anything //console.log(season); })}</p> </div> ) }) return ( <div className="character_list"> {charactersList} </div> ) } export default Characters;

Thank you!

Answer 1

character.seasons.join(',') it takes array elements and returns string, comma is a separator

Answer 2

forEach doesn't return anything. You should use map .

{ 
  character.seasons.map(season => <p>{season}</p>)
}

Answer 3

If you render an array of JSX elements, they'll render just fine; so you can just map the array of values to an array of JSX elements. Note that in these cases, it's important for each element to have a unique key that cannot change for that element, even if it moves positions in the array, to help React render them properly. Luckily, you already have an ID for each character you can use:)

So in your case, you can do something like this:

return (
  <div className="character_list">
    {charactersList.map(character => (
      <span key={character.id}>{character.screenName}</span>
    ))}
  </div>
)

And of course you can render more than just the screenName however you want in there.