FrontendMasters / react-enlightenment

A thoughtful and complete introduction to React.
https://www.reactenlightenment.com
429 stars 79 forks source link

Incorrect JSFiddle #20

Closed hispanasian closed 8 years ago

hispanasian commented 8 years ago

In basic-react-components/6.8.html, there's a jsfiddle to https://jsfiddle.net/codylindley/s3v614b3/#tabs=js,result,html,resources with:

var Parent2 = React.createClass({
  componentDidMount: function() {
    //access to <span>test</span>, if only one child no array used
    console.log(this.props.children.props.children);
    //would log child2text, because I am grabbing the child of the <span>
    console.log(this.props.children.props.children);
  },

  render: function() {return <div />;}
});

var Parent = React.createClass({
  componentDidMount: function() {
    //access to array, containing <div>test</div><div>test</div>
    console.log(this.props.children);
    //would log childtext, because I am grabbing the child of the first <div> in the array
    console.log(this.props.children[1].props.children);
  },

  render: function() {return <Parent2><span>child2text</span></Parent2>;}
});

ReactDOM.render(
  <Parent><div>child</div><div>childtext</div></Parent>,
  document.getElementById('app')
);

The Parent2 componentDidMount comments do not correctly document the results. I get: page has changed Object embedded:9 child2text embedded:12 child2text embedded:20 [Object, Object]0: Object1: Objectlength: 2proto: Array[0] embedded:23 childtext in my console. I'm not exactly sure what your intentions were with it, but one possible correction is:

var Parent2 = React.createClass({
  componentDidMount: function() {
    //access to object containing <span>child2text</span>, if only one child no array used
    console.log(this.props.children);
    //would log child2text, because I am grabbing the child of the <span>
    console.log(this.props.children.props.children);
  },

  render: function() {return <div />;}
});
codylindley commented 8 years ago

Yes. What I meant to do, think I lost a jsfiddle iteration. Anyhow. Thank you. Updating book now.