Access Nested Data with Reacts props.children

HI I was having trouble using the React.renderComponent( ) method from the example, and it looks like the React team has changed the method that you should use in this case from React.renderComponent() to React.render()......https://medium.com/@_jh3y/adopting-change-with-react-v0-12-1d9625e27535

I ran into the same issue Ryan and needed to swap out the script files: http://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react.min.js

https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js

Hey how did you use the emmet like syntax when typing the span.glyphicon... and have webstorm know to use className instead of class (JSX vs HTML) ?

Hey how did you use the emmet like syntax when typing the span.glyphicon... and have webstorm know to use className instead of class (JSX vs HTML) ?

How do I setup bootstrap in my app? The video didn't show this...

Just add <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> to your index.html.

Really Nice Video..Have been enjoying the series

Also found that the Button could be created in a functional(presentational) way

const Button = (props) => <button>{props.children}</button>

I'm still having trouble understanding this.props.children. When adding {this.props.children} to the child component, why doesn't it render a second button with the parent's information ?So in total there would be two buttons. I know my logic is wrong, but can someone tell me why this isn't the case ?

I'm still having trouble understanding this.props.children. When adding {this.props.children} to the child component, why doesn't it render a second button with the parent's information ?So in total there would be two buttons. I know my logic is wrong, but can someone tell me why this isn't the case ?

I think I understand where you're coming from. The nomenclature here is very confusing -- it tripped me up as well. this in the Button class is indeed referring to Button (not <button> directly, but by extension). Whenever you pass something into the inner HTML of a component, it's populated in [child].props.children. If you install React Dev Tools for your browser (or console.dir(this) inside Button.render() { ... } ...), you can see that Button.children is an array composed of 3 "children" passed to it by the App component: "I ", <Heart/> and " React". I know, silly right? They need to come up with a better name for this -- I don't know why they couldn't just call it [child].props.innerHTML. Regardless, I think that answers your question. :D

It would be really cool to have more real-life examples of these vids. Thanks!

I have the same Question with Olga.Thanks for Kirk;s answer.

I thought using props.children is to produce nest component structure with JSX.

// use props.children >> can setup structure in JSX
const HeartButton = (props) => <button>{props.children}</button>
const HeartImg = ()=><span>&hearts;</span>

<HeartButton>
   <HeartImg/>
</HeartButton>

<HeartButton>
   <HeartImg/>
   <HeartImg/>
</HeartButton>

// no need to modify component code

//without props.children >> need to setup the structure in code
const HeartImg = ()=><span>&hearts;</span>
const HeartButton = (props) => <button><HeartImg /></button>

<HeartButton />
// need to edit component to get more heart, or need to produce another component: OneHeartButton, TwoHeartButton ...

don't know that whether my understanding is right ?