Demo

import React, { useState } from 'react';
import { render } from 'react-dom';

const todosStore = {
  todos: {
    '1': {
      id: '1',
      text: '',
    },
  },
  editTodo(setTodosList, { id, text }) {
    this.todos[id] = { ...this.todos[id], text };
    setTodosList(Object.values(this.todos));
  },
};

const App = () => {
  const [todosList, setTodosList] = useState(Object.values(todosStore.todos));
  const editTodoList = todo => todosStore.editTodo(setTodosList, todo);

  return (
    <>
      <DisplayTodoText todo={todosStore.todos[1]} />
      <TodoList
        todos={todosList}
        renderTodo={({ id, text }) => (
          <input
            defaultValue={text}
            placeholder="Enter a text"
            onChange={e => editTodoList({ id, text: e.target.value })}
          />
        )}
      />
    </>
  );
};

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

function DisplayTodoText({ todo: { text } }) {
  return <h1>{text}</h1>;
}

function TodoList({ todos = [], renderTodo = () => {} }) {
  return (
    <ul>
      {todos.map(({ id, text }) => (
        <li key={id}>{renderTodo({ id, text })}</li>
      ))}
    </ul>
  );
}