I am new to React and currently using react 16.13 and i am trying to figure out how to :

1. pass data from Child to Parent Components
2. when the data is passed if the data is "true", render the Child ponent in the Parent page.
3. We have two Children, only the one that is "true" must be rendered on the Parent page.

// Parent

import React from 'react';
import './App.css';
import ChildOne from './ponents/ChildOne';
import ChildTwo from './ponents/ChildTwo';


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

export default App;

// Component ChildOne

function ChildOne() {
    const isActive = "true";

    return (<div>{isActive}</div>);
}

export default ChildOne;


// ponent ChildTwo

function ChildTwo() {
    const isActive = "false";

    return (<div>{isActive}</div>);
}

export default ChildTwo;

I know this is not the right way to represent the state on each child page but i want to understand how to render the above based on the string value from child to parent so I can refactor the codes using useState.

I am new to React and currently using react 16.13 and i am trying to figure out how to :

1. pass data from Child to Parent Components
2. when the data is passed if the data is "true", render the Child ponent in the Parent page.
3. We have two Children, only the one that is "true" must be rendered on the Parent page.

// Parent

import React from 'react';
import './App.css';
import ChildOne from './ponents/ChildOne';
import ChildTwo from './ponents/ChildTwo';


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

export default App;

// Component ChildOne

function ChildOne() {
    const isActive = "true";

    return (<div>{isActive}</div>);
}

export default ChildOne;


// ponent ChildTwo

function ChildTwo() {
    const isActive = "false";

    return (<div>{isActive}</div>);
}

export default ChildTwo;

I know this is not the right way to represent the state on each child page but i want to understand how to render the above based on the string value from child to parent so I can refactor the codes using useState.

• javascript
• reactjs
• react-native
• ecmascript-6
• jsx

• 3 You really should read React.js documentation. – VitorLuizC Commented May 24, 2020 at 4:29
• 1 Try to ask a specific question based on your own attempts and focus your question to a particular (single) problem. Note that the munity here doesn't replace other great online resources such as tutorials. Take at look at How do I ask a good question? to better understand what kind of questions are to be asked on Stack Overflow. – Ivo Mori Commented May 24, 2020 at 4:36

3 Answers 3

1. You can use callbacks, like events, to send updated data from child to parent. And just handle those callbacks with a function that controls App state.

2. When the ponent changes it is rendered again, and it render its children again with new props and handlers.

3. You can use a ternary operator to decide which ponent render.

function App() {
  const [isActive, setIsActive] = useState(false);

  return (
    <div className="App">
      {isActive
        ? <Child1 isActive={isActive} setIsActive={setIsActive} />
        : <Child2 isActive={isActive} setIsActive={setIsActive} />
     }
    </div>
  );
}

function Child1 ({ isActive, setIsActive }) {
  return (<div onClick={() => setIsActive(!isActive)}>{isActive}</div>);
}

function Child1 ({ isActive, setIsActive }) {
  return (<div onClick={() => setIsActive(!isActive)}>{isActive}</div>);
}

1 pass data from Child to Parent Components

This is done with callbacks.

2 when the data is passed if the data is "true", render the Child ponent in the Parent page.

Conditional rendering within a Child can be achieved with an if statement in the render method.

function ChildOne(props) {
    const isActive =props.isActive;

    return (isActive ?<div>{isActive}</div>:null);
}

3 We have two Children, only the one that is "true" must be rendered on the Parent page.

If the two children are the same ponent I would suggest reusing the ponent. And passing a prop.

function Child() {
    const isActive =props.isActive;

    return (isActive ?<div>{isActive}</div>:null);
}



function App() {
   return (
     <div className="App">
       <Child isActive={true}/>
       <Child isActive={false}/>
     </div>
   );
}

1. You can use callback to send data from Child to Parent

2. and 3. You can check the data in parent to render which have data is true

// Parent

import React from 'react';
import './App.css';
import ChildOne from './ponents/ChildOne';
import ChildTwo from './ponents/ChildTwo';


function App() {
  const [childData1, setChildData] = useSate(null)
  const [childData2, setChildData] = useSate(null)
  const handleCallBack = (childData) =>{
    setChildData(childData)
    // save or do whatever you want with childData here
  }
   return (
     <div className="App">
       {childData1 === true && <ChildOne callBack={handleCallBack}) data={childData1} />}
       {childData2 && === true <ChildTwo/>}
     </div>
   );
}

export default App;

// Component ChildOne

function ChildOne({callBack, data}) {
    const isActive = "true";

    return (
      <>
      <button onClic={() => callBack(<data you want to sent to parent>)}>Send Data To parent</button>
      </>
      <div>{data}</div>
  )
}

export default ChildOne;


// ponent ChildTwo

function ChildTwo() {
const isActive = "false";

return (<div>{isActive}</div>);
}

2.