React render only changes

Question

Need to render all users and their elements like name, lastname, title. The problem is when I update some of them with editUser need to re-render current user no the whole list again.

For example, the following code...

import React, { Component } from 'react';


export default class Users extends Component {
  constructor(props) {
    super(props);
    this.editUser = this.editUser.bind(this);
  }

  editUser() {     
    const { id } = this.props.users;
    this.props.editUser(
      id, 
      this.nameInput.value, 
      this.lasnameInput.value, 
      this.titleInput.value
    );
  }

  render() {

    const { name, lastname, title } = this.props.users;

    return (
      <div key={this.props.index}>
        <span>{name}</span>
        <span>{lastname}</span>
        <span>{title}</span>
      </div>
    );
  }
}

Answer 1

To do it you need to create a small component for present user's data. React will re-render component this way.

For example:

render() {
    return (

        this.props.users.map(({name, lastname, title}) => {
            <UserPresenter 
                key={lastname+name}
                name={name},
                lastname={lastName},
                title={title}
            />
        }
    );
}

And you shoud not use index as key value in React