Bonjour

J ai essayé de réaliser une liste mais elle n apparaît pas à l écran, seul "People" est affiché.

Voici mon code

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
/*import {ComposantListe} from './ComposantListe';  */
import './index.css';

/*import Person from './components/person';*/
/*import App from './App'; */


const Person = (props) => {
    return (
        <li className="list-group-item d-flex flex-row justify-content-between align-items-center">
             <span>{ `${props.person.name} ${props.person.age}`} </span>
             <button className="btn btn-small btn-danger" onClick={props.deletePerson}> delete</button>
        </li>
    )
}

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            people : [
                {
                    name: 'pierre',
                    age: 12,
                },{
                    name: 'eric',
                    age: 10
                }

            ]
        }
    }

deletePerson = (index,e) => {
    const people = [...this.state.people];
    people.splice(index,1);
    this.setState({ 
        people:people
    });    
}

render() {
    return (
        <div className="container d-flex flex-column justify-content-center align-items-center">
            <h1 className="mb-5">People</h1>
            <ul className="list-group w-100" >
               {
                   this.state.people.map((p,index) => <Person  person={p} deletePerson={(index)=this.deletePerson(index)} />
                    )
                }                     
            </ul>
        </div>
    );

}
}



ReactDOM.render(<App />, document.getElementById('root')); 

Bonjour,

est-ce que tu as un message d'erreur dans la console ? Quand je développe du JS, la console (F12 dans la plupart des navigateurs) est toujours ouverte chez moi

Salut, 

met un tag [react] dans le nom de ton sujet pour que ceux qui connaissent ce framework puissent te répondre.

-
Edité par lk77 6 juillet 2019 à 14:05:46

JlCro a écrit:

merci j ai trouvé