Passing props to component children

Question

I'm having trouble with React by being unable to pass my props to child components. I've read the documentation but I'm still confused as to what steps need to be taken. This is done using Ruby on Rails with the react_on_rails gem. At this point, Redux is not in use and I'm still learning the ropes with React.

I'm sending in a variable from rails using react_component with the following:

index.html.erb

<%= react_component('Lifts', props: @lifts, prerender: true) %>

Trying to pick it up in React. The data shows up under the Elements section of the Chrome dev tools. But, I'm assuming that maybe I'm not binding the data properly. Nothing seems to show up in LiftsList.jsx. Perhaps the solution is obvious but it's really escaping me right now.

Lifts.jsx

import React, { PropTypes } from 'react';
import LiftsList from './LiftsList';
import Lift from './Lift';
export default class Lifts extends React.Component {

  constructor(props, _railsContext) {
    super(props);
    this.state = {
      id: props.id,
      date: props.date,
      liftname: props.liftname,
      weightlifted: props.weightlifted,
      repsformed: props.repsformed,
    }
  }
  render() {
    return (
      <div className="container" style={{display : 'inline-block'}}>
        <ul>
          <LiftsList lifts = {this.state.lifts} />
        </ul>
      </div>
    );
  }
}

LiftsList.jsx

import React, {PropTypes} from 'react';
import Lift from './Lift';
export default class LiftsList extends React.Component {

  render() {
    let lifts = this.state.lifts.map(lift =>
      <Lift key={prop.id} {...lift} />);
    return (
      <div>
        <div>???</div>
      </div>
    );
  }
}

Lift.jsx

import React, {PropTypes} from 'react';
export default class Lift extends React.Component {

  render() {
    return (
      <ul>
        <li>{this.props.id}</li>
        <li>{this.props.date}</li>
        <li>{this.props.liftname}</li>
        <li>{this.props.ismetric}</li>
        <li>{this.props.weightlifted}</li>
        <li>{this.props.repsformed}</li>
      </ul>
    );
  }
}

in Lifts.jsx for `lifts = {this.state.lifts}` You haven't defined lifts in the state. — A. L, Mar 17 '17 at 03:58

score 0 · Answer 1 · edited May 23 '17 at 12:00

In Lifts, your state appears to be unused, and instead of this.state.lifts I think you want to use this.state.props.

You may instead want something like:

  constructor(props, _railsContext) {
    super(props);
  }
  render() {
    return (
      <div className="container" style={{display : 'inline-block'}}>
        <ul>
          <LiftsList lifts={this.props.lifts} />
        </ul>
      </div>
    );
  }

And similarly, in LiftsList, you likely want something like:

render() {
  let lifts = this.props.lifts.map(lift =>
    <Lift key={lift.id} {...lift} />);
  return (
    <div>
      <div>???</div>
    </div>
  );
}

Which replaces state with props and gets your id from the lift

See: What is the difference between state and props in React?

Passing props to component children

1 Answers1