Skip to content

Instantly share code, notes, and snippets.

@xgqfrms-GitHub
Created June 22, 2017 13:43
Show Gist options
  • Save xgqfrms-GitHub/83f022cd3274d923a1adb7cb33a69605 to your computer and use it in GitHub Desktop.
Save xgqfrms-GitHub/83f022cd3274d923a1adb7cb33a69605 to your computer and use it in GitHub Desktop.
jscomplete
@xgqfrms-GitHub
Copy link
Author

@xgqfrms-GitHub
Copy link
Author

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')
);

@xgqfrms-GitHub
Copy link
Author

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}/ >
  }
}

flux

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> 
}

@xgqfrms-GitHub
Copy link
Author

render a collection of children

If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment