Problem at the onchange function in the main component, when I type on the keyboard inside the input, the page refreshes itself

Question

The problem with the code is that when I type on the keyboard inside the input the page flickers and is refreshed.

The code I'm struggling with is this :

 this.state = {
      search: "",
    };
changedInput = (e) => {
    // //change the state of search for the input
    // this.setState({search:e.target.value})
    
    this.setState({ search: e.target.value });
  };
 <ul style={{ display: this.state.contactsDisplay }}></ul>
        <label>
          <span>search</span>
          <input
            type="text"
            name="form_name"
            id="name"
            
             value={this.state.search}
            onChange={(e)=>{this.changedInput(e)}}
          />
        </label>

Here is the full code: the main component calls the class component of listContacts which just presents the contacts one after the other

class main extends React.Component {
  constructor(props) {
super(props);
this.state = {
  needUpdate: "false",
  showEmptyStr: "none",
  formDisplay: "none",
  formMode: "new", //new or edit
  listDisplay: "block",
  caption: "all contacts",
  contactsDisplay: "block",
  nameOfSelectedContact: "",
  telOfSelectedContact: "",
  addressOfSelectedContact: "",
  freeTextOfSelectedContact: "",
  mailOfSelectedContact: "",
  photoOfSelectedContact: "",
  displaySelectedContact: "none",
  search: "",
};
   this.changeNeedUpdate = this.changeNeedUpdate.bind(this);
   this.checkIfBookEmpty = this.checkIfBookEmpty.bind(this);
   this.changeFormDisplayEdit = 
  this.changeFormDisplayEdit.bind(this);
   this.changeFullDisplayContact = 
 this.changeFullDisplayContact.bind(this);
   this.changeFormDisplay = this.changeFormDisplay.bind(this);
   this.changecontactsDisplay = this.changecontactsDisplay.bind(this);
   this.TOGGLElISTfULL = this.TOGGLElISTfULL.bind(this);

   this.setSelectedContact = this.setSelectedContact.bind(this);
   }
  showContactsInLIst = () => {
//show contacts in a way so they are item in list
let code = "";
code = contactArray.map((item) => (
  <ContactInList
    key={uuidv4()}
    name={item.name}
    address={item.address}
    mail={item.mail}
    photo={item.photo}
    freeText={item.freeText}
    tel={item.tel}
    // search={this.state.search}
    contactDisplay={this.state.contactDisplay}
    changeFormDisplayOneContact={this.changeFormDisplayOneContact}
    changeConDisplay={this.TOGGLElISTfULL}
    setSelectedContact={this.setSelectedContact}
    changeFormDisplayEdit={this.changeFormDisplayEdit}
    changeNeedUpdateMain={this.changeNeedUpdate}
    checkIfBookEmpty={this.checkIfBookEmpty}
    />
   ));

   return code;
 };
   changedInput = (e) => {
    // //change the state of search for the input
      // this.setState({search:e.target.value})

     this.setState({ search: e.target.value });
 };

   render() {
   return (
  <main>
    <button onClick={this.changeFormDisplayInsert}>insert 
         contact</button>

    <h2>{this.state.caption}</h2>
    <h3 style={{ display: this.state.showEmptyStr }}>empty phone 
    book</h3>

    <Form
      formVisibility={this.state.formDisplay}
      formMode={this.state.formMode}
      name={this.state.nameOfSelectedContact}
      photo={this.state.photoOfSelectedContact}
      address={this.state.addressOfSelectedContact}
      mail={this.state.mailOfSelectedContact}
      tel={this.state.telOfSelectedContact}
      freeText={this.state.freeTextOfSelectedContact}
      setSelectedContact={this.setSelectedContact}
      changeFormDisplay={this.changeFormDisplay}
      changeNeedUpdate={this.changeNeedUpdate}
    />
    <ul style={{ display: this.state.contactsDisplay }}></ul>
    <label>
      <span>search</span>
      <input
        type="text"
        name="form_name"
        id="name"
        value={this.state.search}
        onChange={(e) => {
          this.changedInput(e);
        }}
      />
    </label>
    {this.showContactsInLIst()}
    <ContactFull
      name={this.state.nameOfSelectedContact}
      photo={this.state.photoOfSelectedContact}
      address={this.state.addressOfSelectedContact}
      mail={this.state.mailOfSelectedContact}
      tel={this.state.telOfSelectedContact}
      freeText={this.state.freeTextOfSelectedContact}
      changecontactsDisplay={this.changecontactsDisplay}
      displayFull={this.state.displaySelectedContact}
      TOGGLElISTfULL={this.TOGGLElISTfULL}
       />
     </main>
      );
      }
      }

Answer 1

move Component outside the current react. it happened because whenever the state of the current Component changes it will refresh its dom tree. And when the dom will rerender the functional component will be executed again that's why you'll always lose the focus of the input but you never lose the state of the component.