TransWikia.com

Passar estado entre componentes sem hierarquia

Stack Overflow em Português Asked by Beatriz Cibele on September 26, 2021

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

One Answer

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.

Answered by novic on September 26, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP