Soy nuevo en React.JS. Necesito hacer un botón que cree un div con un elemento secundario cada vez que se hace clic en el botón. Mi código actual no crea un nuevo div cada vez que hago clic en el botón.
Además, ¿cómo crearía un nuevo div con un div secundario dentro en React Js?
Aquí está mi código ReactJs:
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; class CrudDivs extends React.Component { renderCrudDiv(){ console.log('clicked') return ( React.createElement( "div", {className: "crud-card"}, "NewDiv", ) ) } render(){ return ( <div className="crud-container"> <div className = "btnContainer" > <button className = "makeDivsBtn" onClick = {this.renderCrudDiv}> Create Divs </button> </div> </div> // container end ) } } ReactDOM.render(< CrudDivs /> , document.getElementById('root'));Teniendo en cuenta que cada vez que tienes que agregar el mismo contenido.
Puede crear un componente. Por ejemplo:
Class Child extends React.Component { render() { return <div>Child</div> } } Ahora en sus CrudDivs simplemente cree un estado llamado childrens of array time.
import React from 'react'; import ReactDOM from 'react-dom'; import Child from './Child'; import './index.css'; class CrudDivs extends React.Component { constructor(props) { super(props); this.childrens = []; } renderCrudDiv(){ const temp = [...this.childrens]; temp.push(1); // to increase counter this.setState({childrens:temp}); } render(){ return ( <div className="crud-container"> <div className = "btnContainer" > <button className = "makeDivsBtn" onClick = {this.renderCrudDiv}> </button> {this.childrens.map((_, index)=> <Child key={index} /> )} </div> </div> // container end ) } } ReactDOM.render(< CrudDivs /> , document.getElementById('root'));Creo que la forma más fácil de lograr su objetivo es usar el estado, que es un mecanismo que conserva algunos datos internos de su componente y hace que se vuelvan a procesar. Intenta cambiar tu implementación a algo como esto:
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; class CrudDivs extends React.Component { state = { storedElements: [] // at the beginning there are no elements } renderSingleDiv() { // generate single element return ( React.createElement( "div", {className: "crud-card"}, "NewDiv", ) ) } renderCrudDiv(){ // update state with new element this.setState((prev) => { return { storesElements: [ ...prev.storedElements, this.renderSingleDiv() ] } }); } render(){ return ( <div className="crud-container"> <div className = "btnContainer" > <button className = "makeDivsBtn" onClick = {this.renderCrudDiv}> Create Divs </button> </div> {storedElements} // display elements </div> // container end ) } } ReactDOM.render(< CrudDivs /> , document.getElementById('root'));Sin duda, hay mejores formas de hacer esto, pero estaba tratando de mantener la mayor cantidad posible de su implementación. :)
Mirando el código, parece que está llegando a un fondo jQuery donde escribe procedimientos sobre cómo mutar el DOM en eventos en lugar de usar el estilo declarativo de React.
En términos más simples, debe mantener un estado (es decir, contar) de cuántos divs mostrar en un momento dado, que luego debe incrementarse al hacer clic en el botón.
class CrudDivs extends React.Component { constructor(props) { super(props); this.state = {divCount: 0}; this.renderCrudDiv = this.renderCrudDiv.bind(this); this.divList = this.divList.bind(this); } renderCrudDiv(){ this.setState({divCount: this.state.divCount + 1}); } divList() { const rowList = []; for (let i = 0; i < this.state.divCount; i++) { rowList.push(<div className="crud-card">NewDiv</div>); } return rowList; } render(){ return ( <div className="crud-container"> <div className = "btnContainer" > <button className = "makeDivsBtn" onClick = {this.renderCrudDiv}> Create Divs </button> </div> {divList()} </div> // container end ) } }Dicho esto, como ya se mencionó en los comentarios, debe usar la sintaxis funcional y de enganche más nueva en lugar de esta obsoleta.