Nsryjdtyk

I would like to create a table in ReactJs which has inputs instead of data cells like a small Excel project. But I have created the table in the following link. And now, I want to merge two inputs when they are chosen with the help of button and pressed. I have no idea to start this merging inputs. If you have any clue to start this one, can you let me know. Otherwise I am surfing the whole Internet to find any project like it but no result yet.

<div id="container">

<!-- This element's contents will be replaced with your component. -->

</div>



class App extends React.Component {

constructor(props) {

super(props);

this.state = {

  users: [{code:"", id: "", data: "", others: "", something: ""}]

};

}



addClick(){

this.setState(prevState => ({ 

  users: [...prevState.users, { others: "", something: "", code: "", id: "", 

  data: "" }]

  }))

  }



createUI(){

 return this.state.users.map((el, i) => (

     <tbody  key={i}>

     <tr>

       <td>

      <input type='text' placeholder={i+1} name="something" value= 

 {el.something ||''} onChange={this.handleChange.bind(this, i)} />

       </td>          

      <td>

      <input placeholder="code" name="code" value={el.code ||''} onChange= 

 {this.handleChange.bind(this, i)} /></td>

      <td>

      <input placeholder="id" name="id" value={el.id ||''} onChange= 

 {this.handleChange.bind(this, i)} />

      </td>

      <td>

      <input placeholder="Data" name="data" value={el.data ||''} onChange= 

 {this.handleChange.bind(this, i)} /></td>

      <td>

      <input placeholder="Others..." name="others" value={el.others ||''} 

  onChange={this.handleChange.bind(this, i)} />

      </td>

      </tr>

      </tbody>

  ))

  }



   handleChange(i, e) {

   const { name, value } = e.target;

   let users = [...this.state.users];

   users[i] = {...users[i], [name]: value};

   this.setState({ users });

   }



   removeClick(){

   let users = [...this.state.users];

   users.pop();

   this.setState({ users });

   }







  render() {

   return (

   <div>

      <button onClick={this.addClick.bind(this)}>+</button>

      <button onClick={this.removeClick.bind(this)}>Remove</button>

      <button>Drag</button>

     <table>

       <thead>

         <tr>

         <th>Something</th>

         <th>Code</th>

         <th> ID </th>

         <th> Data</th>

         <th>Others</th>

         </tr>

       </thead>

       {this.createUI()}        

     </table> 

     </div>

    );

    }

    }



    ReactDOM.render(<App />, document.getElementById('container'));