想要根据点击 map() 中的一个对象来填充输入值：React+Typescript

Question

I am maintaining an array of objects which is stored in a state object. Basically I am pushing each object to this array whenever I click on Add button .This stores this object in array.

Also I am iterating this array of objects to display down the page.

Right now I am trying to fill the input fields based on the object that I have clicked. I am unable to do it. Basically, the object that I have clicked should populate the input fields and then I should be able to edit it

Help would be appreciated

The structure of array of objects:

users= [
        {"name":"xxx","email":"yyy","phone":"656"},
        {"name":"yyy","email":"xxx","phone":"55"}
       ];

Component Code

import * as React from 'react';

interface IState{
    users : Account[];
    user: Account
}
interface Account{
  name: string;
  email: string;
  phone: string
}

export default class App extends React.Component<{},IState> {

    constructor(props:any){
       super(props);
       this.state= { 
                         users: [],
                         user: {
                                   name: '',
                                   email: '',
                                   phone: '',
                               }
                   }
    }

  removeAccount = (i:number) => {
    let users = [...this.state.users];
    users.splice(i,1);
    this.setState({users},()=>{console.log('setting the data')});
  }

  handleChange = ( event: React.ChangeEvent<HTMLInputElement>) => {
    this.setState({
      user:{
        ...this.state.user,
        [event.currentTarget.name]:event.currentTarget.value
      }
      })
  }

  onAdd = () => {
    e.preventDefault();
    this.setState({ 
                    users: [...this.state.users, this.state.user],
                    user: { name:'', email: '', phone: ''}
                  },()=>{console.log('adding')});
  }

  clearInputs = () => {
     this.setState({user: { name:'', email: '', phone: ''}});
  }

  showDetails = (i:number) => { //I need to populate the input fields based on the index of the object clicked.
     console.log(i);
  }

  render(){
    const { name, email, phone } = this.state.user;
   <React.Fragment>
     <form onSubmit={this.onAdd}>
       <input type="text" value={name} onChange={(e:any) => this.handleChange(e)} name={"name"} />
       <input type="text" value={email} onChange={(e:any) => this.handleChange(e)} name={"email"} />
       <input type="text" value={phone} onChange={(e:any) => this.handleChange(e)} name={"phone"} />
       <button type="submit">Add</button>
      </form>

      <ul>
          {this.state.users.map((row:any ,index: number) =>
            <li key={index}>
              <a onClick={()=> this.showDetails(index)}><span>{row.name}</span></a> // on click of this,i need to display the values corresponding to this object in the above input fields
              <i className="close far fa-times" onClick={() =>this.removeAccount(index)}/>
            </li>
          )}
      </ul>

   </React.Fragment>
  }
}

Answer 1

Based on logic of the code showDetails should look like

showDetails = (i:number) => { 
    this.setState ({user: this.state.users.splice(i,1)});
    console.log(i);
}

Just set user to the selected element of users array. React will do update and calls render() with updated data.

Also utilizing splice will remove currently editing user from array. THis follow logic of the code. After edit Add should be clicked to add modified user back to array. This may be not convenient, so you may consider adding editingIndex to state and specify which user object currently editing. In such case you'll have to save index of selected object in editingIndex . In handleChange you should check if some user object editing now and modify data not only in user property of state but in corresponding users array element

interface IState{
    users : Account[];
    user: Account;
    editingIndex: number | null;
}

// In constructor
constructor(props:any){
   super(props);
   this.state= { 
                     users: [],
                     user: {
                               name: '',
                               email: '',
                               phone: '',
                           },
                     editingIndex: null
               }
}
showDetails = (i:number) => { 
    this.setState ({user: this.state.users[i], editingIndex: i});
    console.log(i);
}

handleChange = ( event: React.ChangeEvent<HTMLInputElement>) => {
    let user = {...this.state.user,
        [event.currentTarget.name]:event.currentTarget.value};
    this.setState({user});
    // If we currently editing existing item, update it in array
    if (this.state.editingIndex !== null) {
        let users = [...this.state.users];
        users[this.state.editingIndex] = user;
        this.setState({users});
    }
}
removeAccount = (i:number) => {
   let users = [...this.state.users];
   // If we're going to delete existing item which we've been editing, set editingIndex to null, to specify that editing ends
   if (this.state.editingIndex === i)
       this.setState({user: {name: '', email: '', phone: ''}, editingIndex: null});
   users.splice(i,1);
   this.setState({users},()=>{console.log('setting the data')});
 }

 onAdd = () => {
    e.preventDefault();
    // If we NOT editing, but adding new editingIndex will be null so add user to users array. If we editing existing element it's no need to add it once again.
    if (this.state.editingIndex === null)
        this.setState({ users: [...this.state.users, this.state.user] });
    this.setState ({ editingIndex: null, 
                user: { name:'', email: '', phone: ''}
              },()=>{console.log('adding')});
 }
 // render will have no change