Passing prop to another component and render on the view

187
April 26, 2019, at 3:30 PM
import Form from './Form'
  class SideBar extends React.Component {
    constructor(props) {
    super(props);
    this.state = {
    item: '' 
  };
}
render() {
  return (
    this.props.products.map((x) => {
    let boundItemClick = this.onItemClick.bind(this, x);
    return <li key={x.id} onClick={boundItemClick}>{x.id}-{x.style_no}-{x.color}</li>
    }));
  }
  onItemClick= function(item, e) {  
    console.log(item)
  }
 }
export default SideBar
import SideBar from './SideBar'
class Form extends React.Component{
  render(){
  return();
}
}

 export default Form


**strong text**<div class = first_half><%= react_component("SideBar", {products: 
@products}) %></div>
<div class = second_half><%= react_component("Form", {products: 
@products}) %></div>

I have a question about how to pass the props to Form component. Right now, the SideBar component list all the link, and everything I click one of the link, I can console.log the information. But I have no idea how to pass it on the other component and render on the view. Thank you

for example : (this is a sidebar componenet) 301-abc 302-efg 303-rgk

When user click 301-abc, it will show coresponding details like id, color, and style.

Answer 1

Likewise SideBar component you have to create constructor a Form component.

And you have to create state with products detail.

class SideBar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      item: ''
    };
  }
  render() {
    return (
      this.props.products.map((x) => {
        let boundItemClick = this.onItemClick.bind(this, x);
        return <li key={x.id} onClick={boundItemClick}>{x.id} - {x.style_no} - {x.color}</li>
      }));
  }
  onItemClick = function(item, e) {
    console.log(item)
    this.props.selectedData(item);
  }
}
export default SideBar
import SideBar from './SideBar'
class Form extends React.Component {
  constructor() {
    this.state = {
      products: [{
        id: '302',
        style_no: 'abc',
        color: 'red'
      }, {
        id: '303',
        style_no: 'abcd',
        color: 'black'
      }],
      selectedData: {}
    };
  }
  getSelectedData(selectedData) {
    this.setState({
      selectedData: selectedData
    });
  }
  render() {
    return ( 
      <SideBar products = {this.state.products} selectedData={this.getSelectedData}>
    );
  }
}

In above code I have pass method as pops with name selectedData and you can use that in your onItemclick method as I used it and pass your item.

this.props.selectedData(item);

So, you will get that item in your Form component and set your state and you can display it in your Form component and can also pass to another component.

Hope it will work for you..!!

Answer 2

If you got a lot of nested components which need to be aware of each other state/information, your best choice is to choose a state management something like redux,flux or etc. state management mission is to hold data across components and helps you keep uni-direction data-flow in react. Although, if you don't want to use a state management mechanism for any reason. you may implement it like this (which is ugly): https://stackblitz.com/edit/react-pkn3cu

Rent Charter Buses Company
READ ALSO
How to modify this JSON to another JSON with JavaScript?

How to modify this JSON to another JSON with JavaScript?

help please, I need to transform this json:

154
issue with set timeinterval in reactjs

issue with set timeinterval in reactjs

I tried to call a function in set time inter val for every 5 seconds but i throws errors in TypeError: thisintialState is not a function

193
How to find a number which is the result of added which elements in the array(Javascript)?

How to find a number which is the result of added which elements in the array(Javascript)?

For example, there is an array arr[1,2,4,8,16,32,64,128], each element represents a permissionThis is the number used for permission assignment

162
keypress being deprecated, how to get the characters typed by a user?

keypress being deprecated, how to get the characters typed by a user?

The javascript keypress event is deprecated: https://developermozilla

209