How in React JSX to pass a parent custom react component state attribute value to child customer component?

Question

Assume the MyCustomRectComponentA component has a state variable "offset". How then to get access to this to pass as a prop to AnotherCustomComponentB?

  public render() {
    return (
      <MyCustomRectComponentA>
        <AnotherCustomComponentB offsetValue={parent.state.offset} />
      </MyCustomRectComponentA>
    );

  }

@ShubhamKhatri - just checking - in the JSX extract is actually from JSX component 1 say. Within the render method I have the JSX component 2 tag (MyCustomRectComponentA), which within it has JSX component 3 (AnotherCustomComponentB). So normally "this" would refer to JSX component 1 and not component 2 (/MyCustomRectComponentA)? — Greg, Jan 31 '19 at 05:23
@DaveNewton My mistake, the question wasn't quite clear to me — Shubham Khatri, Jan 31 '19 at 05:25
@Greg do you want to access offset in MyCustomRectComponentA?? — Shubham Khatri, Jan 31 '19 at 05:26
Check this https://stackoverflow.com/questions/29670173/accessing-react-component-children-props-from-the-parent. However I would say, you could simply pass offset to MyCustomRectComponentA unless you want to access all props of children purposefully — Shubham Khatri, Jan 31 '19 at 05:29
@Greg you want to pass `MyCustomRectComponentA` (2)component state as props to `AnotherCustomComponentB`(3) and they both are in another parent component (1) — Sahil Raj Thapa, Jan 31 '19 at 05:49
@JSEngine - Yes they are in another custom parent component. — Greg, Jan 31 '19 at 06:12
ok then you can use `React.children` and `React.cloneElement` — Sahil Raj Thapa, Jan 31 '19 at 06:13

score 1 · Accepted Answer · answered Jan 31 '19 at 06:29

You can use React.Children and React.cloneElement api in your MyCustomRectComponentA component.

eg:

import React, { Component, Children , cloneElement } from 'react'

class MyCustomRectComponentA extends Component {
    state = {
        offset: '50px'
    }
    render() {
        return (
            <div>              
                // mapping through every children elements
                // passed to "MyCustomRectComponentA" component
                {Children.map(this.props.children, child => { 
                    // you have to clone the child element
                    // because they are read-only 
                    // and pass the "state" as props
                    return cloneElement(child, {
                     offsetValue: this.state.offset 
                    })
                })}
            </div>
        )
    }   
}

export default MyCustomRectComponentA

After this you can update your parent component containing MyCustomRectComponentA and AnotherCustomComponentB to

 public render() {
    return (
      <MyCustomRectComponentA>
        <AnotherCustomComponentB />
      </MyCustomRectComponentA>
    );

  }

What we have done is that we passed <AnotherCustomComponentB /> component as children to </MyCustomRectComponentA> component.

And in </MyCustomRectComponentA> component

1) we mapped through children component passed to it

2) cloned the children component

3) passed state "offset" as props to children component

For more detail about React.Children you can go to this source

How in React JSX to pass a parent custom react component state attribute value to child customer component?

1 Answers1