Estoy creando una página de detalles del producto y creé una aplicación de clase para contener el código principal del proyecto para facilitar un constructor para cargar datos desde mi API.
Quiero tener 3 variables numéricas que pueda aumentar/disminuir a través de los botones en la página Se configuró para 3 productos de QHD, HD, Baterías.
Escribí el siguiente código pero no es correcto y estoy buscando formas correctas de implementarlo.
class App extends React.Component { constructor(props) { super(props); this.state = { items: [], isLoaded: false, HD: 0, }; } componentDidMount() { fetch("https://fe-assignment.vaimo.net/") .then((res) => res.json()) .then((data) => { console.log(data); this.setState({ isLoaded: true, items: data, TI: 0, }); }); } increaseHD() { HD = 1; }Continuado
render() { const HD = 0; <div className="button-row"> <button className="minus">-</button> <form className="input">{HD}</form> <button className="plus" onClick={this.increaseHD}>+</button> </div>Devuelve el error de que esta indefinido. Sé que debería configurarse tal vez en el constructor o en toda la clase, pero soy nuevo en reactjs y necesito ayuda
class App extends React.Component { constructor(props) { super(props); this.state = { items: [], isLoaded: false, HD: 0, } } increaseHD = () => { this.setState({ HD: 5 }) } render() { return ( <div> Hello {this.state.HD} <button className="plus" onClick={this.increaseHD}>+</button> </div> ) } }También puede aumentar hd tomando el estado anterior del componente
increaseHD = () => { this.setState({ HD: this.state.HD + 1 }) }