javascript - Pass state between sibling components in React - Stack Overflow

admin管理员组

文章数量:1291030

I am working on a simple ShoppinList. I have two ponents, Form.js and List.j. How can I display in List.js the items that are stored in list array in Form.js ? I don't want useState to be written in App.js, but would keep the logic separate in its own ponents.

App.js:

//Imporing Components
import Form from "./Components/Form";
import List from "./Components/List";

function App() {
  return (
      <div className="App">
          <header>
              <h1>Shopping List</h1>
          </header>
          <Form/>
          <List/>
      </div>
  )
}

Form.js:

/*Create a Component*/
const Form = () => {

    const [inputText,setInputText] = useState("")
    const [list,setList] = useState([])

    const submitBtn = (e) =>{
         e.preventDefault()  /*kein refresh tätigen*/
        setList([
            ...list,{inputText}
        ])
    }

    /*Funktion*/
    /*const inputTextHandler =  (e) => {
        setInputText(e.target.value)
    }*/

    return (
        <form>
            <input
                value={inputText}
                type="text"
                onChange={
                    (e) => setInputText(e.target.value)
                }
            />
            <button type="submit" onClick={submitBtn}>
                <i>Add</i>
            </button>
        </form>
    )
}
export default Form

List.js:

import React, {useState} from "react";

const List = () =>{
    return(
        <div>
            <ul>{[List]}</ul>
        </div>
    )
}
export default List

I am working on a simple ShoppinList. I have two ponents, Form.js and List.j. How can I display in List.js the items that are stored in list array in Form.js ? I don't want useState to be written in App.js, but would keep the logic separate in its own ponents.

App.js:

//Imporing Components
import Form from "./Components/Form";
import List from "./Components/List";

function App() {
  return (
      <div className="App">
          <header>
              <h1>Shopping List</h1>
          </header>
          <Form/>
          <List/>
      </div>
  )
}

Form.js:

/*Create a Component*/
const Form = () => {

    const [inputText,setInputText] = useState("")
    const [list,setList] = useState([])

    const submitBtn = (e) =>{
         e.preventDefault()  /*kein refresh tätigen*/
        setList([
            ...list,{inputText}
        ])
    }

    /*Funktion*/
    /*const inputTextHandler =  (e) => {
        setInputText(e.target.value)
    }*/

    return (
        <form>
            <input
                value={inputText}
                type="text"
                onChange={
                    (e) => setInputText(e.target.value)
                }
            />
            <button type="submit" onClick={submitBtn}>
                <i>Add</i>
            </button>
        </form>
    )
}
export default Form

List.js:

import React, {useState} from "react";

const List = () =>{
    return(
        <div>
            <ul>{[List]}</ul>
        </div>
    )
}
export default List

• javascript
• reactjs

Share Improve this question Follow edited Sep 3, 2023 at 6:10 Youssouf Oumar 46.3k1616 gold badges101101 silver badges104104 bronze badges asked May 20, 2022 at 6:46 SasanSasan 11311 gold badge11 silver badge1010 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

In React, state goes top to bottom. A nested ponent can update the state of a parent if a function defined in the parent has been passed to it as prop. Hence, what you wanna do is not possible (exchanging state between List and Form, two sibling ponents).

For this to work, you should have the state for the list in a parent ponent, App.js for example, this way:

import Form from "./Components/Form";
import List from "./Components/List";
import {useState} from "react";


function App() {
  const [list, setList] = useState([])
  return (

      <div className="App">
          <header>
              <h1>Shopping List</h1>
          </header>
          <Form list = {list} setList = {setList}/>
          <List list = {list} />
      </div>
  )
}

import React, {useState} from "react";

const List = ({list}) =>{

    return(
        <div>
            <ul>{list.map(item => <li>"test"</li>)}</ul>
        </div>
    )
}

export default List

const Form = ({list, setList}) => {
    const [inputText,setInputText] = useState("")

    const submitBtn = (e) =>{
         e.preventDefault()  
        setList([
            ...list,{inputText}
        ])
    }

    return (
        <form>
            <input
                value={inputText}
                type="text"
                onChange={
                    (e) => setInputText(e.target.value)
                }
            />
            <button type="submit" onClick={submitBtn}>
                <i>Add</i>
            </button>
        </form>
    )
}

export default Form

You can't really do what you're asking as React only allows child ponents to accept state from parent ponents, it is a top-down process. I would remend using a React "Context"; A context will allow you to have one ponent that can share state throughout the entire ponent tree without having to pass props down through child ponents. It's basically a store for the whole react app, that can be pulled wherever and whenever needed.

https://reactjs/docs/context.html

You can't pass props to sibling ponent without passing it to parent ponent. Alternative way is to use state managers such as Redux, Effector or at least React Context.

The way React works:

import Form from "./Components/Form";
import List from "./Components/List";


function App() {
    const [list, setList] = useState([]);


    const formSubmitHandler = (passedData) => {
        setList(passedData);
    }

    return (
         <div className="App">
             <Form onSubmitting={formSubmitHandler}/>
             <List list={list}/>
         </div>
    )
}

本文标签： javascriptPass state between sibling components in ReactStack Overflow