2

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>
    );
  }
}

6
  • Você só consegue passar props de componentes pais pra componentes filhos, diretamente entre irmãos não é possível, nesse caso você teria que passar de um filho, para o pai e do pai para outro filho. Commented 18/07/2020 às 22:55
  • Verdade, estou colocando no state do App um array para receber o estado do filho, já que App é o pai, agora falta fazer uma função que passa esse estado para filho AddTodo, porque esse AddTodo é um capo de inserir, a ideia é por o texto aí mesmo. Ficou confuso ? Commented 18/07/2020 às 23:10
  • Estude Redux ou Context do Reactjs
    – novic
    Commented 18/07/2020 às 23:56
  • 1
    Não, a idéia é essa mesmo. Creio que tem como passar direto, mas usando Hooks, acho que o UseContext faz isso, passa direto pra qualquer componente sem levar em consideração era hierarquia. Mas como vc tá usando Class Components creio que só assim mesmo, de pai pra filho. Commented 19/07/2020 às 0:36
  • 1
    Você pode controlar o estado no pai e passar uma função de criarTodo para um filho e a listaDeTodos para o outro filho. Vale ler Quando usar contexto? e Antes de você usar contexto. Commented 20/07/2020 às 22:29

1 Resposta 1

0

Essa é uma forma de programar um elo entre componentes onde os mesmo compartilham dos mesmo dados e quando o botão incrementa ou decrementa são clicados a ação se programa para mostrar a variável de estado count nos que estão com essa variável do Context, exemplo:

const GlobalContext = React.createContext();
function GlobalProvider({children}) {
  const [count, setCount] = React.useState(0);
  const handleIncrement = () => setCount(count + 1);
  const handleDecrement = () => setCount(count - 1);
  return (
    <GlobalContext.Provider value={{count, handleIncrement, handleDecrement}}>
      {children}
    </GlobalContext.Provider>
  )
}

function Score() {
  const { count, handleIncrement, handleDecrement  } = React.useContext(GlobalContext);
  return (<div>
    <div>{count}</div>
    <button onClick={handleIncrement}>Incremento</button>
    <button onClick={handleDecrement}>Decremento</button>
  </div>);
}

function Actions() {
  const { count } = React.useContext(GlobalContext);
  return (<div>{count}</div>);
}

function App() {  
  return (
    <GlobalProvider>
      <Score />
      <Actions/>
    </GlobalProvider>
  )
}

ReactDOM.render(<App/>, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>

nesse código exemplo é criado um contexto com React.createContext();e logo na próxima linha uma função para facilitar a criação do seu Provider e por fim dentro do <App /> foi envolvido dois componentes que compartilharam funções e dados desse Provider.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .