J'essaie de fusionner l'index 1 du tableau 1 avec l'index 1 du tableau 2 dans react JS mais je ne sais pas comment créer la boucle dans app.js pour afficher le prénom + le nom de chaque personne.

    //App.js

import React from 'react'; 
import Names from './Test.js'; 
import Lastname from './Lastnames'; 
class App extends React.Component {
render() {
let names = ["Lucy", " ",  "Kaity", " ",  "Maria", " ",  "Barbara"];
let lastname = ["Stone", " ",  "Black", " ", "Rodriguez", " ",  "Pitt"];
return (
  <div className="App">
    <Names names = {names}/>
    <Lastname lastname = {lastname}/>
  </div>
);
} }
export default App;

Test.js

import React from "react";
class Names extends React.Component {
  render() {
    return <span>{this.props.names}</span>;
  }
}
export default Names;

//Lastname.js

import React from "react";
class Lastname extends React.Component {
  render() {
    return <span>{this.props.lastname}</span>;
  }
}
export default Lastname;

Merci beaucoup :)

0
Anastasia 13 avril 2020 à 23:46

2 réponses

Meilleure réponse

Salut désolé, la question n'était pas claire pour moi, alors je vais essayer de répondre à ce que je comprends.

Si vous souhaitez combiner deux tableaux, vous pouvez utiliser la fonction de carte Javascript pour y parvenir.

  let namesCombined = names.map((currentName, index, arr) => {
    return `${currentName} ${lastname[index]}`
  });

Votre code complet ressemble à ceci -

//App.js
import React from 'react'; 
import Names from './Test.js'; 
import Lastname from './Lastnames'; 

class App extends React.Component {

render() {
  let names = ["Lucy", " ",  "Kaity", " ",  "Maria", " ",  "Barbara"];
  let lastname = ["Stone", " ",  "Black", " ", "Rodriguez", " ",  "Pitt"];

 // assuming you are using ES6 syntax
  let namesCombined = names.map((currentName, index, arr) => {
    return `${currentName} ${lastname[index]}`
  });

  // at this point namesCombined will have both first name and last name combined.

  return (
    <div className="App">
      <Names names = {names}/>
      <Lastname lastname = {lastname}/>
    </div>
  );

Encore une fois désolé, c'est ainsi que j'ai compris votre question. Si vous pouvez montrer à quoi devrait ressembler la sortie, je peux corriger ma réponse.

0
Mukund Goel 13 avril 2020 à 21:26

Si vous souhaitez fusionner deux tableaux en fonction de leur index, vous pouvez utiliser la fonction javascript Array.map():

  const fullnames = names.map((name, index) => {
    `${name} ${lastnames[index]}`
  });

Et vous pouvez utiliser for:

const fullnames = []
  for(var i = 0 ; i < names.length ; i++) {
   fullnames.push(`${names[i]} ${lastnames[i]}`);
  }

Vous n'avez pas besoin d'économiser de l'espace dans vos tableaux.

Je n'ai pas trouvé ce que vous vouliez pour le résultat mais en cas de fusion, vous pouvez utiliser le code ci-dessus.

Aussi, vous pouvez utiliser const au lieu de let.

0
idin khayami 13 avril 2020 à 22:00