Данные компонентов в React

Данные компонентов могут хранится в трех местах: в пропсах, в переменных и константах компонента, и в стейтах. В пропсах хранятся данные, которые посылает компоненту извне его родительский компонент. При этом внутри компонента пропсы должны оставаться неизменными.

В переменных, константах и стейтах следует хранить локальные данные, которые важны лично компоненту и о которых не следует знать родителю. При этом в стейтах следует хранить данные, которые могут изменяться в различных событиях и при этом вы хотите, чтобы изменения были реактивными.

jsxfunction Test() {
  // определение isEdit, elem и data
  
  if (isEdit) {
    elem = <input value={data} />;
  } else {
    elem = <span>{data}</span>;
  }
  
  return <div>
    {elem}
  </div>;
}