I want to share Child Component (Product.js) data into Parent Component (App.js) without button click. I will use useState with context API. I don't know how to passed this data without click event.

Product.js data display into console.log() into App.js component.

App.js

import React from 'react';
import Product from './Product';

function App() {
  return (
    <div className="App">
      <Product />
    </div>
  );
}

export default App;

Product.js

import React from 'react';

const Product = () => {
    return (
        <div>
           Product Name: <input type="text" />
           <br />
           Description:- <input type="text" />
        </div>
    )
}

export default Product

Please help I have no advance knowledge of react.

CodePudding user response：

There are three ways to share information without click event with useContext and useState.

1. useContext
2. useState in childComponent
3. useState in parentComponent

1. useContext

import { createContext, useContext, useState } from 'react';

import React from 'react';

const Context = createContext();

const Product = () => {
  const [info, setInfo] = useContext(Context);
  return (
    <div>
      Product Name: <input type="text" value={info.name} onChange={(e) => {
      setInfo({ ...info, name: e.target.value });
    }} />
      <br />
      Description:- <input type="text" value={info.desc} onChange={(e) => {
      setInfo({ ...info, desc: e.target.value });
    }} />
    </div>
  );
}

function App() {
  const [info, setInfo] = useState({
    name: '',
    desc: ''
  });

  return (
    <div className="App">
      <Context.Provider value={[info, setInfo]}>
        <Product />
      </Context.Provider>
    </div>
  );
}

export default App;

If you have each component in a file. You have to create the context in a third file and import it from the parent and child component.

2. useState in childComponent

import { useEffect, useState } from 'react';

import React from 'react';

const Product = ({ setParentInfo }) => {
  const [info, setInfo] = useState({ name: '', desc: '' });
  useEffect(() => {
    setParentInfo(info);
  }, [info])
  return (
    <div>
      Product Name: <input type="text" value={info.name} onChange={(e) => setInfo({ ...info, name: e.target.value  })} />
      <br />
      Description:- <input type="text" value={info.desc} onChange={(e) => setInfo({ ...info, desc: e.target.value  })} />
    </div>
  )
}

let info = { name: '', desc: '' }

function App() {
  return (
    <div className="App">
      <Product setParentInfo={(newInfo) => {
        info = { ...newInfo };
      }} />
    </div>
  );
}

export default App;

3. useState in parentComponent

import { useState } from 'react';

import React from 'react';

const Product = ({ info, setParentInfo }) => {
  return (
    <div>
      Product Name: <input type="text" value={info.name} onChange={(e) => setParentInfo({ ...info, name: e.target.value  })} />
      <br />
      Description:- <input type="text" value={info.desc} onChange={(e) => setParentInfo({ ...info, desc: e.target.value  })} />
    </div>
  )
}


function App() {
  const [info, setInfo] = useState({ name: '', desc: '' });
  console.log("parent: ", info);
  return (
    <div className="App">
      <Product info={info} setParentInfo={(newInfo) => {
        setInfo({ ...newInfo });
      }} />
    </div>
  );
}

export default App;

I hope I've helped you. Have a nice day!

CodePudding user response：

If its a direct child to parent communication, it's better to done this using props. Less code, works fine!

App.js:-

import React from 'react';
import Product from './Product';

function App() {
  return (
    <div className="App">
      <Product 
         onProductNameChange={productName => console.log(productName)} 
         onProductDescChange={productDesc => console.log(productDesc)}
      />
    </div>
  );
}

export default App;

Product.js:-

import React from 'react';

const Product = ({onProductNameChange, onProductDescChange}) => {
    return (
        <div>
           Product Name: <input type="text" onChange={e => onProductNameChange(e.target.value)} />
           <br />
           Description:- <input type="text" onChange={e => onProductDescChange(e.target.value)} />
        </div>
    )
}

export default Product