Is there a cleaner/better way to write this Contact Manager in React? I am learning React by doing a Contact Manager, I am trying to write this code more efficiently. Any ideas...good practise, component splitting, formatting tips are accepted too. Thanks in advance
P.S. Sorry for my English...I am from Italy.
First I used a separate function for everything, then I transformed person variable in an object to use the id and to map the array, then I used the person id to remove people by clicking the side button. Is it possible to do something else?
import React, { Component } from &quot;react&quot;;
import &quot;./App.css&quot;;

export default function App() {
  return (
    &lt;div className=&quot;container&quot;&gt;
      &lt;h1 className=&quot;title&quot;&gt;React Contact Manager&lt;/h1&gt;

      &lt;Content /&gt;
    &lt;/div&gt;
  );
}

class Content extends Component {
  state = {
    people: [],
    name: &quot;&quot;,
    age: &quot;&quot;,
    telephone: &quot;&quot;,
    searchTerm: &quot;&quot;,
  };

  id = 1;
  people = [];

  getName = (e) =&gt; {
    this.setState({ name: e.target.value });
  };
  getAge = (e) =&gt; {
    this.setState({ age: e.target.value });
  };
  getTelephone = (e) =&gt; {
    this.setState({ telephone: e.target.value });
  };
  getSearchTerm = (e) =&gt; {
    this.setState({ searchTerm: e.target.value });
  };

  AddPerson = () =&gt; {
    const newPerson = {
      id: this.id,
      name: this.state.name,
      age: this.state.age,
      telephone: this.state.telephone,
    };
    this.people.push(newPerson);
    this.setState({ people: this.people });
    this.id++;
  };

  RemoveElement = (id) =&gt; {
    let newPeople = this.people.filter((person) =&gt; person.id !== id);
    this.people = newPeople;
    this.setState({ people: this.people });
  };

  ClearItems = () =&gt; {
    this.people = [];
    this.setState({ people: this.people });
  };

  render() {
    return (
      &lt;div className=&quot;content&quot;&gt;
        &lt;div className=&quot;inputs&quot;&gt;
          &lt;input
            type=&quot;text&quot;
            placeholder=&quot;Name&quot;
            className=&quot;fname&quot;
            onChange={this.getName}
          /&gt;
          &lt;input
            type=&quot;number&quot;
            placeholder=&quot;Age&quot;
            className=&quot;age&quot;
            onChange={this.getAge}
          /&gt;
          &lt;input
            type=&quot;tel&quot;
            placeholder=&quot;Telephone Number&quot;
            className=&quot;telephone&quot;
            onChange={this.getTelephone}
          /&gt;
        &lt;/div&gt;

        &lt;div className=&quot;buttons&quot;&gt;
          &lt;button className=&quot;add&quot; onClick={this.AddPerson}&gt;
            Add
          &lt;/button&gt;
        &lt;/div&gt;

        &lt;ul className=&quot;result&quot;&gt;
          {(this.people || []).map((person) =&gt; (
            &lt;li key={person.id}&gt;
              &lt;div className=&quot;values&quot;&gt;
                {person.name + &quot;, &quot; + person.age}
                &lt;span className=&quot;telephone_span&quot;&gt;{person.telephone}&lt;/span&gt;
              &lt;/div&gt;
              &lt;button
                className=&quot;delete&quot;
                onClick={() =&gt; this.RemoveElement(person.id)}
              &gt;
                Remove
              &lt;/button&gt;
            &lt;/li&gt;
          ))}
        &lt;/ul&gt;
        &lt;button className=&quot;clear&quot; onClick={this.ClearItems}&gt;
          Clear
        &lt;/button&gt;
      &lt;/div&gt;
    );
  }
}
Don't add extra properties to the component for things that belong in state.  Delete this.people because you already have this.state.people.  Move i into state.
Of course if you do that you cannot use mutating operations like ++ and .push() so you need to make a few changes.  When you are setting a state based on a previous state it is a best practice to use an update function to get the current state which ensures that you always have the most recent value.
You can do this:
this.setState({ people: this.state.people.concat(newPerson) });

But it's better to do this:
this.setState(prevState =&gt; ({ people: prevState.people.concat(newPerson) }));

The common code convention in JavaScript is to use camelCase for functions and class methods.  So use addPerson, removeElement, etc.
You want to be able to clear the inputs when you add a contact.  In order to do that, your &lt;input&gt; elements need to be controlled components which get their value from state.
Revised Code:
import React, { Component } from &quot;react&quot;;

export default function App() {
  return (
    &lt;div className=&quot;container&quot;&gt;
      &lt;h1 className=&quot;title&quot;&gt;React Contact Manager&lt;/h1&gt;

      &lt;Content /&gt;
    &lt;/div&gt;
  );
}

class Content extends Component {
  state = {
    people: [],
    name: &quot;&quot;,
    age: &quot;&quot;,
    telephone: &quot;&quot;,
    searchTerm: &quot;&quot;,
    id: 0,
  };

  getName = (e) =&gt; {
    this.setState({ name: e.target.value });
  };
  getAge = (e) =&gt; {
    this.setState({ age: e.target.value });
  };
  getTelephone = (e) =&gt; {
    this.setState({ telephone: e.target.value });
  };
  getSearchTerm = (e) =&gt; {
    this.setState({ searchTerm: e.target.value });
  };

  addPerson = () =&gt; {
    this.setState(state =&gt; ({ 
      // clear inputs
      name: &quot;&quot;,
      age: &quot;&quot;,
      telephone: &quot;&quot;,
      // increment id
      id: state.id + 1,
      // add person
      people: state.people.concat({
        id: state.id,
        name: state.name,
        age: state.age,
        telephone: state.telephone,
      })
    }));
  };

  removeElement = (id) =&gt; {
    this.setState( state =&gt; ({
      people: state.people.filter((person) =&gt; person.id !== id)
    }));
  };

  clearItems = () =&gt; {
    this.setState({ people: [] });
  };

  render() {
    return (
      &lt;div className=&quot;content&quot;&gt;
        &lt;div className=&quot;inputs&quot;&gt;
          &lt;input
            type=&quot;text&quot;
            placeholder=&quot;Name&quot;
            className=&quot;fname&quot;
            value={this.state.name}
            onChange={this.getName}
          /&gt;
          &lt;input
            type=&quot;number&quot;
            placeholder=&quot;Age&quot;
            className=&quot;age&quot;
            value={this.state.age}
            onChange={this.getAge}
          /&gt;
          &lt;input
            type=&quot;tel&quot;
            placeholder=&quot;Telephone Number&quot;
            className=&quot;telephone&quot;
            value={this.state.telephone}
            onChange={this.getTelephone}
          /&gt;
        &lt;/div&gt;

        &lt;div className=&quot;buttons&quot;&gt;
          &lt;button className=&quot;add&quot; onClick={this.addPerson}&gt;
            Add
          &lt;/button&gt;
        &lt;/div&gt;

        &lt;ul className=&quot;result&quot;&gt;
          {(this.state.people || []).map((person) =&gt; (
            &lt;li key={person.id}&gt;
              &lt;div className=&quot;values&quot;&gt;
                {person.name + &quot;, &quot; + person.age}
                &lt;span className=&quot;telephone_span&quot;&gt;{person.telephone}&lt;/span&gt;
              &lt;/div&gt;
              &lt;button
                className=&quot;delete&quot;
                onClick={() =&gt; this.removeElement(person.id)}
              &gt;
                Remove
              &lt;/button&gt;
            &lt;/li&gt;
          ))}
        &lt;/ul&gt;
        &lt;button className=&quot;clear&quot; onClick={this.clearItems}&gt;
          Clear
        &lt;/button&gt;
      &lt;/div&gt;
    );
  }
}