CODEWITHSUNDEEP
reactjsreact-props
kadddeee
kadddeee

Reputation: 498

Pass child data to parent?

I would like to pass data from a child component to the parent.

Here is my code: https://codesandbox.io/s/018488478p

In my child component I have this const = priceShown that I would like to display in the parent component. As so:

<h2>Price:{priceShown}</h2>

I have tried placing functions in the parent then passing them as a props to the child so I can have access to const = priceShown as it will live in the parent but i comes up as undefined. Here is that code: https://codesandbox.io/s/14vyy31nlj

Upvotes: 1

Views: 448

Answers (2)

Vasuki Dileep
Vasuki Dileep

Reputation: 583

In react, the data flow is unidirectional i.e from parent to child. If Parent Component wants to access Child Component data, you can use refs (though it's not recommended).

Eg: Lets say you have a function getPrice() defined in your Child component.

class Parent extends React.Component {
constructor(props) {
super(props);
this.getPrice = this.getPrice.bind(this);
};

getPrice() {
    let price = this.refs.child.getPrice();
};

render() {
    return(
        <Child
          ref="child"
        />
    )
  };
}

And in your Child component, 

class Child extends React.Component {
    constructor(props) {
    super(props);
    this.state = {
        price: "100"
    }
this.getPrice = this.getPrice.bind(this);
};

getPrice() {
    return this.state.price
  };   
}

Hope this helps.

Upvotes: 1

Tholle
Tholle

Reputation: 112917

You can instead keep the state in the parent and pass down a function as prop that will be called from the child component with the appropriate arguments that will update this state in the parent.

Example

class App extends React.Component {
  state = {
    evenSelected: null
  };

  handleSelectL1 = i => {
    this.setState({
      evenSelected: i,
      oldSelected: null
    });
  };

  render() {
    const product = [
      {
        name: "one",
        price: 1
      },
      {
        name: "two",
        price: 2
      },
      ,
      {
        name: "three",
        price: 3
      }
    ];

    const evenIndex = this.state.evenSelected;

    return (
      <div>
        <Child
          product={product}
          handleSelectL1={this.handleSelectL1}
          evenIndex={evenIndex}
        />
        <h2>Price: </h2>
      </div>
    );
  }
}

class Child extends React.Component {
  render() {
    const { product, evenIndex } = this.props;

    const priceShown = product[evenIndex] && product[evenIndex].price;

    return (
      <div>
        {product.map((p, i) => {
          return (
            <div
              key={p.id}
              className={evenIndex === i ? "selectedRBox" : "selectorRBox"}
              onClick={() => this.props.handleSelectL1(i)}
            >
              <h1 className="selectorTextL">
                {p.name} {evenIndex === i && "selected!"}
              </h1>
            </div>
          );
        })}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

Upvotes: 1

Related Questions