/Javascript/React/React pass props to children

React pass props to children

import React, { Children, isValidElement, cloneElement } from 'react';

const Child = ({ doSomething, value }) => (
  <div onClick={() => doSomething(value)}>Click Me</div>
);

function Parent({ children }) {
  function doSomething(value) {
    console.log('doSomething called by child with value:', value);
  }

  render() {
    const childrenWithProps = Children.map(children, child => {
      // Checking isValidElement is the safe way and avoids a TS error too.
      if (isValidElement(child)) {
        return cloneElement(child, { doSomething })
      }

      return child;
    });

    return <div>{childrenWithProps}</div>
  }
};

ReactDOM.render(
  <Parent>
    <Child value="1" />
    <Child value="2" />
  </Parent>,
  document.getElementById('container')
);

Source: stackoverflow.com

Similar codes

0 vote301 views1 answer
React Redux store exemple
Javascript React
0 vote292 views1 answer
React link onclick refresh page
Javascript React
15 votes290 views2 answers
React native get location
Javascript React
1 vote284 views2 answers
Await fetch in react
Javascript React
0 vote297 views1 answer
React native add bottom tab and drawer menu
Javascript React
0 vote271 views2 answers
Can we use .env in react native?
Javascript React
2 votes317 views1 answer
React strict mode
Javascript React
0 vote313 views1 answer
Get input value in react using hooks
Javascript React
19 votes282 views3 answers
React Hooks append state
Javascript React
14 votes296 views4 answers
React how to update state array
Javascript React