Asked  7 Months ago    Answers:  5   Viewed   32 times

Is there not a simple way to pass a child's props to its parent using events, in React.js?

var Child = React.createClass({
  render: function() {
    <a onClick={this.props.onClick}>Click me</a>
  }
});

var Parent = React.createClass({
  onClick: function(event) {
    // event.component.props ?why is this not available?
  },
  render: function() {
    <Child onClick={this.onClick} />
  }
});

I know you can use controlled components to pass an input's value but it'd be nice to pass the whole kit n' kaboodle. Sometimes the child component contains a set of information you'd rather not have to look up.

Perhaps there's a way to bind the component to the event?

UPDATE – 9/1/2015

After using React for over a year, and spurred on by Sebastien Lorber's answer, I've concluded passing child components as arguments to functions in parents is not in fact the React way, nor was it ever a good idea. I've switched the answer.

 Answers

46

Edit: see the end examples for ES6 updated examples.

This answer simply handle the case of direct parent-child relationship. When parent and child have potentially a lot of intermediaries, check this answer.

Other solutions are missing the point

While they still work fine, other answers are missing something very important.

Is there not a simple way to pass a child's props to its parent using events, in React.js?

The parent already has that child prop!: if the child has a prop, then it is because its parent provided that prop to the child! Why do you want the child to pass back the prop to the parent, while the parent obviously already has that prop?

Better implementation

Child: it really does not have to be more complicated than that.

var Child = React.createClass({
  render: function () {
    return <button onClick={this.props.onClick}>{this.props.text}</button>;
  },
});

Parent with single child: using the value it passes to the child

var Parent = React.createClass({
  getInitialState: function() {
     return {childText: "Click me! (parent prop)"};
  },
  render: function () {
    return (
      <Child onClick={this.handleChildClick} text={this.state.childText}/>
    );
  },
  handleChildClick: function(event) {
     // You can access the prop you pass to the children 
     // because you already have it! 
     // Here you have it in state but it could also be
     //  in props, coming from another parent.
     alert("The Child button text is: " + this.state.childText);
     // You can also access the target of the click here 
     // if you want to do some magic stuff
     alert("The Child HTML is: " + event.target.outerHTML);
  }
});

JsFiddle

Parent with list of children: you still have everything you need on the parent and don't need to make the child more complicated.

var Parent = React.createClass({
  getInitialState: function() {
     return {childrenData: [
         {childText: "Click me 1!", childNumber: 1},
         {childText: "Click me 2!", childNumber: 2}
     ]};
  },
  render: function () {
    var children = this.state.childrenData.map(function(childData,childIndex) {
        return <Child onClick={this.handleChildClick.bind(null,childData)} text={childData.childText}/>;
    }.bind(this));
    return <div>{children}</div>;
  },

  handleChildClick: function(childData,event) {
     alert("The Child button data is: " + childData.childText + " - " + childData.childNumber);
     alert("The Child HTML is: " + event.target.outerHTML);
  }
});

JsFiddle

It is also possible to use this.handleChildClick.bind(null,childIndex) and then use this.state.childrenData[childIndex]

Note we are binding with a null context because otherwise React issues a warning related to its autobinding system. Using null means you don't want to change the function context. See also.

About encapsulation and coupling in other answers

This is for me a bad idea in term of coupling and encapsulation:

var Parent = React.createClass({
  handleClick: function(childComponent) {
     // using childComponent.props
     // using childComponent.refs.button
     // or anything else using childComponent
  },
  render: function() {
    <Child onClick={this.handleClick} />
  }
});

Using props: As I explained above, you already have the props in the parent so it's useless to pass the whole child component to access props.

Using refs: You already have the click target in the event, and in most case this is enough. Additionnally, you could have used a ref directly on the child:

<Child ref="theChild" .../>

And access the DOM node in the parent with

React.findDOMNode(this.refs.theChild)

For more advanced cases where you want to access multiple refs of the child in the parent, the child could pass all the dom nodes directly in the callback.

The component has an interface (props) and the parent should not assume anything about the inner working of the child, including its inner DOM structure or which DOM nodes it declares refs for. A parent using a ref of a child means that you tightly couple the 2 components.

To illustrate the issue, I'll take this quote about the Shadow DOM, that is used inside browsers to render things like sliders, scrollbars, video players...:

They created a boundary between what you, the Web developer can reach and what’s considered implementation details, thus inaccessible to you. The browser however, can traipse across this boundary at will. With this boundary in place, they were able to build all HTML elements using the same good-old Web technologies, out of the divs and spans just like you would.

The problem is that if you let the child implementation details leak into the parent, you make it very hard to refactor the child without affecting the parent. This means as a library author (or as a browser editor with Shadow DOM) this is very dangerous because you let the client access too much, making it very hard to upgrade code without breaking retrocompatibility.

If Chrome had implemented its scrollbar letting the client access the inner dom nodes of that scrollbar, this means that the client may have the possibility to simply break that scrollbar, and that apps would break more easily when Chrome perform its auto-update after refactoring the scrollbar... Instead, they only give access to some safe things like customizing some parts of the scrollbar with CSS.

About using anything else

Passing the whole component in the callback is dangerous and may lead novice developers to do very weird things like calling childComponent.setState(...) or childComponent.forceUpdate(), or assigning it new variables, inside the parent, making the whole app much harder to reason about.


Edit: ES6 examples

As many people now use ES6, here are the same examples for ES6 syntax

The child can be very simple:

const Child = ({
  onClick, 
  text
}) => (
  <button onClick={onClick}>
    {text}
  </button>
)

The parent can be either a class (and it can eventually manage the state itself, but I'm passing it as props here:

class Parent1 extends React.Component {
  handleChildClick(childData,event) {
     alert("The Child button data is: " + childData.childText + " - " + childData.childNumber);
     alert("The Child HTML is: " + event.target.outerHTML);
  }
  render() {
    return (
      <div>
        {this.props.childrenData.map(child => (
          <Child
            key={child.childNumber}
            text={child.childText} 
            onClick={e => this.handleChildClick(child,e)}
          />
        ))}
      </div>
    );
  }
}

But it can also be simplified if it does not need to manage state:

const Parent2 = ({childrenData}) => (
  <div>
     {childrenData.map(child => (
       <Child
         key={child.childNumber}
         text={child.childText} 
         onClick={e => {
            alert("The Child button data is: " + child.childText + " - " + child.childNumber);
                    alert("The Child HTML is: " + e.target.outerHTML);
         }}
       />
     ))}
  </div>
)

JsFiddle


PERF WARNING (apply to ES5/ES6): if you are using PureComponent or shouldComponentUpdate, the above implementations will not be optimized by default because using onClick={e => doSomething()}, or binding directly during the render phase, because it will create a new function everytime the parent renders. If this is a perf bottleneck in your app, you can pass the data to the children, and reinject it inside "stable" callback (set on the parent class, and binded to this in class constructor) so that PureComponent optimization can kick in, or you can implement your own shouldComponentUpdate and ignore the callback in the props comparison check.

You can also use Recompose library, which provide higher order components to achieve fine-tuned optimisations:

// A component that is expensive to render
const ExpensiveComponent = ({ propA, propB }) => {...}

// Optimized version of same component, using shallow comparison of props
// Same effect as React's PureRenderMixin
const OptimizedComponent = pure(ExpensiveComponent)

// Even more optimized: only updates if specific prop keys have changed
const HyperOptimizedComponent = onlyUpdateForKeys(['propA', 'propB'])(ExpensiveComponent)

In this case you could optimize the Child component by using:

const OptimizedChild = onlyUpdateForKeys(['text'])(Child)
Tuesday, June 1, 2021
 
TheFrack
answered 7 Months ago
14

In JSX, lower-case tag names are considered to be HTML tags. However, lower-case tag names with a dot (property accessor) aren't.

See HTML tags vs React Components.

  • <component /> compiles to React.createElement('component') (html tag)
  • <Component /> compiles to React.createElement(Component)
  • <obj.component /> compiles to React.createElement(obj.component)
Tuesday, June 1, 2021
 
ranhan
answered 7 Months ago
65

You can pass props to the component by making use of the render prop to the Route and thus inlining your component definition. According to the DOCS:

This allows for convenient inline rendering and wrapping without the undesired remounting explained above.Instead of having a new React element created for you using the component prop, you can pass in a function to be called when the location matches. The render prop receives all the same route props as the component render prop

So you can pass the prop to component like

 <Route path="/" exact render={(props) => (<Home test="hi" {...props}/>)} />

and then you can access it like

this.props.test 

in your Home component

P.S. Also make sure that you are passing {...props} so that the default router props like location, history, match etc are also getting passed on to the Home component otherwise the only prop that is getting passed down to it is test.

Tuesday, June 1, 2021
 
PeanutsMcgee
answered 7 Months ago
76

I figured it out - the tutorial is missing two things:

  1. The script inclusion should be done thus, with a type declaration:

    <script type="text/jsx" src="/Scripts/Tutorial.jsx"></script>

  2. The JSX transformer needs to be included:

    <script src="http://fb.me/JSXTransformer-0.12.2.js"></script>

So the full HTML output by the Razor view should look like this:

<!DOCTYPE html>
<html>
  <head>
    <title>Hello React</title>
  </head>
  <body>
    <div id="content"></div>
    <script src="http://fb.me/react-0.12.2.js"></script>
    <script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
    <script type="text/jsx" src="/Scripts/Tutorial.jsx"></script>
  </body>
</html>

Looks like they need to update their tutorial.

Update:

Commenter @DanielLoNigro added this helpful tip:

Actually if you're using ReactJS.NET, you don't need to use the client-side JSXTransformer. Just ensure that the JSX handler is configured in your Web.config file (there should be a handler for .jsx).

Monday, August 16, 2021
 
Robert C. Barth
answered 4 Months ago
21

In your case you need to deal with callbacks. Callback is a concept in react.

Declare an event handler function in orders.js which sets the orderId to the state when button clicked in orders.js component and pass down that event handler function to Order component as props and pass down orderId as a prop to OrderViewer component

orders.js

  constructor(props){
      super(props);
      this.state = {
           orderId: null
      }
  }
  handleViewOrder = orderId = {
      this.setState({
          orderId
      });
  }
  render(){
    return(<div>
     <div><Order 
       orderno='abc'
       title='abc'
      status='abc'
      entity='abc'
      po='abc'
      duedate='abc' handleViewOrder={this.handleViewOrder} /></div>
  </div>
  <div><OrderViewer orderId={this.state.orderId} /></div>)}

Now in order.js access the received handler function using props and assign it to button onClick by passing orderId

   <div>
      <button onClick={() => this.props.handleViewOrder(this.props.orderno)}>View Order</button>
      <p><span>{this.props.orderno}</span> 
     <span>{this.props.title}</span></p>
     <p>{this.props.entity} - {this.props.po}</p>
     <p>Due {this.props.duedate}</p>
 </div>

Now, you can access orderId using this.props.orderId in OrderViewer component and display it

OrderViewer.js

   <div>{this.props.orderId}</div>

So having an event handler function in parent component and passing down as props to child component and assigning to child component button onClick and when clicked changing parent state is so called callbacks in react. If you understand what I am trying to explain in my answer you can get going easily

Edit:

In Order.js component

Change

  <button onClick={() => this.handleViewOrder(this.props.orderno)}>View Order</button>

To

   <button onClick={() => this.props.handleViewOrder(this.props.orderno)}>View Order</button>

Also you are calling Order component in loop but you are not setting unique key to Order component so

Change

            { Orders.map((order) => <Order 
                 orderno={order.orderno}
            title={order.title}
                 status={order.status}
                entity={order.entity}
                po={order.po}
            duedate={order.duedate}
            handleViewOrder={this.handleViewOrder}/> )}

To

            { Orders.map((order) => <Order 
            orderno={order.orderno}
            title={order.title}
            status={order.status}
                entity={order.entity}
            po={order.po}
                            key={order.orderno}
            duedate={order.duedate}
            handleViewOrder={this.handleViewOrder}/> )}
Friday, August 20, 2021
 
tim_d
answered 4 Months ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :  
Share