How to make ReactJS onClick function change the value of a textarea?

Question

I am trying to make a ReactJS form in which there is a button which, once pressed, alters the value of an input tag. Every time I press the button, the text is changed, but the page reloads, and the textarea returns to being blank. I've searched up on this issue a little and found this thread: Reactjs every time refreshing page on setState . However, the solution to this problem( shouldComponentUpdate() {return false;} ) ended up making it so that the text of the inputarea didn't change at all. Here is my code:

 import React, { Component } from 'react'; export default class Header extends Component { state = { cep: "", address: "", } searchCEP(){ this.setState({ address: "Adress" }); } render(){ return ( <div> <div id="host-form" className="row"> <div className="col s1"></div> <form className="col s10"> <div className="row"> <div className="input-field col s6"> <input placeholder='"Terreno para churrasco"' id="title" type="text" className="validate"/> <label htmlFor="title">Título</label> </div> <div className="input-field col s2"> <input id="cep" type="text" className="validate" defaultValue={this.state.cep}/> <label htmlFor="cep">CEP</label> </div> <div id="buscar-cep" className="col s1"> <button onClick={() => this.searchCEP()} className="waves-effect blue waves-light btn">Buscar por CEP</button> </div> <div className="col s2"></div> </div> <div className="row"> <div className="input-field col s12"> <input placeholder='"Terreno de 500 metros quadrados com uma linda vista do Cristo Redentor...\"' id="description" type="text" className="validate"/> <label htmlFor="description">Descrição</label> </div> </div> <div className="row"> <div className="input-field col s12"> <input id="address" type="text" className="validate" defaultValue={this.state.address}/> <label htmlFor="address">Endereço</label> </div> </div> </form> </div> </div> ); } };

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

I hope this is enough to understand my problem. Thanks in advance for any help.

Answer 1

You can make following changes

 <div id="buscar-cep" className="col s1">
                                <button onClick={(e) => this.searchCEP(e)} className="waves-effect blue waves-light btn">Buscar por CEP</button>
 </div>

and in searchCEP function, do the following changes:

searchCEP(e){
e.preventDefault();
        this.setState({ address : "Adress" });
    }

This will stop the reloading

Answer 2

from reading what you said the best case reason as to why the page reloads, from past exprience is that when you call the function you do not prevent the default action of the button within the form so you could try

    """
  searchCEP(e){
        e.preventDefault();
        this.setState({ address : "Adress" });
    }
"""

 <div id="buscar-cep" className="col s1">
  <button onClick={(e) => this.searchCEP(e)} className="waves-effect blue waves-light btn">Buscar por CEP</button>
  </div>

"""

Since

hope this helps

Answer 3

You should stop the default behavior of the form element:

<form onSubmit={(e) => e.preventDefault()}