Me encontré con un problema mientras aprendía reactJS. Aquí, tengo un componente de página de forEach HomePage funciona en ReactJs mientras intento obtener los datos de la matriz definida. A continuación se muestra el código:
import React, { useEffect } from "react"; import ChessRankings from "../components/ChessRankings"; import "../App.css"; import gifPath from "../assets/pieceChess.gif"; const paraContent = [ "ChessMania is a website that gives the latest update for chess. Chess is one of the most tactical games played across the globe. Here our main focus is to present the various chess articles. However, this website also covers the basics of learning objectives of chess as well as current chess rankings at the international level.", "Subsequently, we also cover the common FAQs related to chess, the notation, and the type of game played in chess. You also get a glimpse of various prestigious tournaments of chess played across the globe within a chess calendar and about the esteemed players taking part in, it.", "The last section takes you through the profile of any Lichess Player that loves chess. The profile section displays the basic introduction, including name, nationality, followers, and total games played. Later it shows the player's rating in each variant and the percentage of wins and losses. It also shows the chess variant played by that user most and which are least. Finally, it shows the statistics of the player in the puzzle section.", ]; const HomePage = () => { useEffect(() => { document.title = "ChessMania - Home"; }, []); return ( <> <h1>Hello , Welcome to Chess Mania</h1> <br /> <div className="text-center"> <img src={gifPath} alt="gif" /> </div> <hr /> { paraContent.forEach((element) => { //console.log(element); return (<p className="about-paragraph">{element}</p>) }) } </> ); }; export default HomePage;¿No puedo averiguar el error? Alguien, por favor dígame cuál es el problema aquí?
Use la función de map dentro del elemento de representación:
https://codesandbox.io/s/react-code-slr6e
paraContent.map((element, index) => { //console.log(element); return (<p className="about-paragraph" key={index}>{element}</p>) })