Estou fazendo um app todo list, e gostaria que ao clicar no botão edit o conteúdo aparecesse no campo onde adiciono meu novo item. Mas a ação do botão e o estado são componentes irmãos.
AddTodo (como passo o estado da AddTodo para a Todo ?)
import React, { Component } from "react";
export default class AddTodo extends Component {
state = {
content: ""
};
handleChange = e => {
this.setState({ content: e.target.value });
};
handleSubmit = e => {
e.preventDefault();
this.props.addTodo(this.state);
this.setState({ content: "" });
};
// Como passar o estado dessa função ?
render() {
return (
<div>
<form onSubmit={this.handleSubmit}>
<label class="blue-text">Add new todo</label>
<input
type="text"
onChange={this.handleChange}
value={this.state.content}
/>
</form>
</div>
);
}
}
Todo
import React from "react";
import "./style.css";
const Todos = ({ todos, deleteTodo }) => {
const todoList = todos.length ? (
todos.map(todo => {
return (
<div className="collection-item" key={todo.id}>
<span
onClick={() => {
deleteTodo(todo.id);
}}
>
{todo.content}
</span>
<button
class="btn-small orange lighten-1 right"
id="btnEdit"
onClick={() => {editTodo(todo.content)}}
>
<i class="material-icons">edit</i>
</button>
</div>
);
})
) : (
<p className="center">Nothing todo, yay</p>
);
return <div className="todos collection">{todoList}</div>;
};
export default Todos;
App
import React, { Component } from "react";
import Todos from "./Todos";
import AddTodo from "./AddTodo";
export default class App extends Component {
state = {
todos: [
{ id: 1, content: "learning Redux" },
{ id: 2, content: "buy some milk" },
{ id: 3, content: "play Mario kart" }
]
};
deleteTodo = id => {
const todos = this.state.todos.filter(todo => {
return todo.id !== id;
});
this.setState({ todos });
};
addTodo = todo => {
todo.id = Math.random();
const todoss = [...this.state.todos, todo];
this.setState({ todos: todoss });
};
render() {
return (
<div className="todo-app container">
<h1 className="center blue-text">Todo list</h1>
<Todos todos={this.state.todos} deleteTodo={this.deleteTodo} />
<AddTodo addTodo={this.addTodo} />
</div>
);
}
}
Reactjs
criarTodo
para um filho e alistaDeTodos
para o outro filho. Vale ler Quando usar contexto? e Antes de você usar contexto.