Access Nested Data with Reacts props.children
When you're building your React components, you'll probably want to access child properties of the markup. this.props.children accesses the innerHTML or nested components of another component.
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>♥</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>♥</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 ?