Class App extiende React.Component {constructor (props) {super (props); this.state = {}} handleAddNew () {const name = prompt ('¿Qué idioma desea agregar?')} render () {...

0
Fin HARRIS 14 mar. 2021 a las 19:07

2 respuestas

La mejor respuesta

Si mantiene los paneles de la lista y los renderiza usando map se simplificará. Al agregar un nuevo panel desde el indicador, simplemente actualice el estado (lista de paneles).

Prueba algo como a continuación.

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { panels: ['Python', 'Javascript', 'PHP', 'C#'] }
  }

  handleAddNew() {
    const name = prompt('What language do you want to add?')
    this.setState({ panels: [...this.state.panels, name] })
  }

  render() { 
    return ( 
      <div className='container'>
        <h1>Please vote</h1>
        {this.state.panels.map(pan =>  <Panel key={pan} name={pan} />)}
        <button className='addNewButton' onClick={() => this.handleAddNew()}><h3>Add new</h3></button>
      </div>
     );
  }
}
2
Xorifelse 14 mar. 2021 a las 16:50

Estás buscando algo como esto:

import React from "react";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { langs: ["Python", "JavaScript", "PHP", "C#"] };
  }

  handleAddNew() {
    const name = prompt("What language do you want to add?");
    this.setState({ langs: [...this.state.langs, name] });
  }

  render() {
    return (
      <div className="container">
        <h1>Please vote</h1>
        {this.state.langs.map((lang) => (
          <Panel name={lang} />
        ))}
        <button className="addNewButton" onClick={() => this.handleAddNew()}>
          <h3>Add new</h3>
        </button>
      </div>
    );
  }
}
export default App;
2
Péter Leéh 14 mar. 2021 a las 16:27