Skip to content

Instantly share code, notes, and snippets.

@MikeBild

MikeBild/Demo

Created Mar 28, 2019
Embed
What would you like to do?
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>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.