How to pass props to {this.props.children}

Question

I\'m trying to find the proper way to define some components which could be used in a generic way:

Answer 1

Parent.jsx:

import React from 'react';

const doSomething = value => {};

const Parent = props => (
  

    {
      !props || !props.children 
        ? 
Loading... (required at least one child)
        : !props.children.length 
            ? {props.children}
            : props.children.map((child, key) => 
              React.cloneElement(child, {...props, key, doSomething}))
    }
  
);

Child.jsx:

import React from 'react';

/* but better import doSomething right here,
   or use some flux store (for example redux library) */
export default ({ doSomething, value }) => (
  
 doSomething(value)}/>
);

and main.jsx:

import React from 'react';
import { render } from 'react-dom';
import Parent from './Parent';
import Child from './Child';

render(
  
    
    
    
  ,
  document.getElementById('...')
);

see example here: https://plnkr.co/edit/jJHQECrKRrtKlKYRpIWl?p=preview