Передача данных через из дочернего компонента в context provider React js

Question

У меня есть модальное окно и дальний компонент "Page". Я передаю значения из модального окна в GrandParent компонент через контекст, но данные в провайдере не видны

Modalbuy.js

import React, {useState} from "react";
import "./modal.css";
import { DataBuyContext } from "../../page/page";


const Modalbuy = ({active, setActive,price}) => {
  const [inputVolume, setInputVolume] = useState("")
  function saveInput(event) {
    setInputVolume(event.target.value)
    console.log(inputVolume)
  }

  const {dataBuy, setDataBuy} = React.useContext(DataBuyContext)
  function addBuy() {
    setDataBuy([...dataBuy,{side: "BUY", price:{price},volume: {inputVolume},timestamp: new Date().toLocaleTimeString()}])
    // console.log(dataBuy)
  }


  
  
    return (
      
      
        <div className={active ? "modal active" : "modal"} onClick={() => setActive(false)}>
          <div className="modal__content" onClick={e => e.stopPropagation()}>
            <header>Make order</header>
            <p>BUY {price}</p>
            <input placeholder="Volume" value={inputVolume} onChange={saveInput}></input>
            <div>
              <button onClick = {addBuy}>Ok</button>
              <button onClick={() => setActive(false)} >Cancel</button>
            </div>


          </div>
        </div>
        
        
    )
}

export default Modalbuy;

Page.js

import React, {useState} from 'react'


import Trading from '../trading/Trading'
import Archive from '../archive/Archive'
import './page.css';
export const DataBuyContext = React.createContext({})



const Page = () => {

  const [dataBuy, setDataBuy] = useState([{}])
  

  // let saveBuyData = (buyData) => {
  //   setBuyData(buyData)
  // }
  const [toggleState, setToggleState] = useState(1)

  const toggleTab = (index) =>{
    setToggleState(index);
  }
  console.log(dataBuy)
  



  return (
    <DataBuyContext.Provider value = {{dataBuy, setDataBuy}}>
    <div className="container">
      <div className="block-tabs">
        <button
          className={toggleState === 1 ? "tabs active-tabs" : "tabs"}
          onClick={() => toggleTab(1)}>
          Trading
        </button>
        <button
          className={toggleState === 2 ? "tabs active-tabs" : "tabs"}
          onClick={() => toggleTab(2)}>
          Archive
        </button>
      </div>

      <div className="content-tabs">
        <div
          className={toggleState === 1 ? "content  active-content" : "content"}>
            <Trading />

          
        </div>

        <div
          className={toggleState === 2 ? "content  active-content" : "content"}>
            <Archive dataBuy= {dataBuy} />

        </div>

      </div>
    </div>
    </DataBuyContext.Provider>
  );

}

export default Page;

Answer 1

Давай начнем с работающего варианта. Можешь взять его за основу и развить html элементы до своего варианта.

//import React from 'react';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);


const UserContext = React.createContext();

//
function App() {
  const [user, setUser] = React.useState([])
  return (
    <UserContext.Provider value={{user, setUser}}>
      <Add />
      {user.map(el => <User key={el.id} data={el} />)}
    </UserContext.Provider>
  )
}

//
function User({data}) {
    
  return <p>{data.name}</p>
}

//
function Add() {
  const [val, setVal] = React.useState('')
  const {setUser} = React.useContext(UserContext);  
  const add = _ => {
    const o = {id: new Date(), name: val}
    setUser(old => [...old, o])
    setVal('')
  }
    
  return (
    <div>
      <input value={val} onInput={e => setVal(e.target.value)} />
      <button onClick={add}>+</button>
    </div>
  )
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.production.min.js"></script>

<div id='root'></div>

БЛОГ НА HUSL

Передача данных через из дочернего компонента в context provider React js

Ответы (1 шт):