ReactJS/Typescript : Typing and properties of children

Question

I have a component which is a grid (). In this grid, the latter can have children who are also components that I created. I would like to know if it is possible to:

• Add properties to my components only if they are used as a child component of my grid ?
• Restrict the components that can be used as a child in my grid (for example being able to use only components) ?

Thank you so much

Answer 1

You can manipulate children props further with React.Children and React.cloneElement

Example

interface ChildProps {
  value: string;
}

interface GridProps<T = ChildProps> {
  children: React.ReactElement<T> 
    | React.ReactElement<T>[] 
    | React.SFC<T> 
    | React.SFC<T>[]
}

const Grid: React.SFC<GridProps> = ({children}) => {
  return <>{React.Children.map(children, (child: any, index) => {
    const name: string = child.displayName 
      || child.name 
      || (child.type || {}).displayName 
      || 'Component';

    if(name === "Child") {
      return null;
    }

    return child;
  })}</>
}

const Child: React.SFC<ChildProps> = ({value}) => {
  return <div>
    {value}
  </div>
}

Child.displayName = "Child";


class App extends React.Component<{}, []> {


  public render() {

    return (
      <div>
        <Grid>
          <Child value={"Test 1"}/>
          <Child value={"Test 2"}/>
        </Grid>
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

As you can see parent component kind of decides what to pass and render.