https://gist.github.com/xgqfrms-gildata/0080e188a6921504717220fdae5eddb9
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const names = ["Sara","Cahal", "Edite"];
function App() {
return (
<div>
{names.map((name)=>{
return <Welcome name={name} />;
})}
</div>
);
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
class Parent extends React.Component {
constructor(props) {
super(props)
this.handler = this.handler.bind(this)
}
handler(e) {
e.preventDefault()
this.setState({
someVar: someValue
})
}
render() {
return <Child handler = {this.handler} />
}
}
class Child extends React.Component {
render() {
return <Button onClick = {this.props.handler}/ >
}
}import { Dispatcher } from flux
import { Component } from React
const dispatcher = new Dispatcher()
// Component 3
// Some methods, such as constructor, omitted for brevity
class StatefulParent extends Component {
state = {
text: 'foo'
}
componentDidMount() {
dispatcher.register( dispatch => {
if ( dispatch.type === 'change' ) {
this.setState({ text: 'bar' })
}
}
}
render() {
return <h1>{ this.state.text }</h1>
}
}
// Click handler
const onClick = event => {
dispatcher.dispatch({
type: 'change'
})
}
// Component 5 in your example
const StatelessChild = props => {
return <button onClick={ onClick }>Click me</button>
}
If you meant to render
a collection of children, use anarrayinstead or wrap the object using createFragment(object) from the React add-ons.
https://www.sitepoint.com/style-react-components-styled-components/