jbardon/react-state.html

## react-state.html
<!doctype html>
<html>
  <head>
    <title>React</title>
  </head>
  <body>
    <script src="https://unpkg.com/react@16.2.0/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16.2.0/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.24.2/babel.min.js" charset="utf-8"></script>
    <script src="https://unpkg.com/fetch@1.1.0/lib/fetch.js" charset="utf-8"></script>

    <div id="app"></div>

    <script type="text/babel">
      class Survey extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            questions: [ 'Do you like bananas ?', 'Are you a developer ?' ]
          };
        }
        render() {
          return (
            <React.Fragment>
              { this.state.questions.map((question, index) => <QuestionContainer key={index} label={question}/>) }
            </React.Fragment>
          );
        }
      }

      const Question = props =>
        <p>
          <span>{props.label}</span>
          <label><input type="radio" name="answer" value="true" onChange={props.answerQuestion}/>Yes</label>
          <label><input type="radio" name="answer" value="false" onChange={props.answerQuestion}/>No</label>
        </p>

      class QuestionContainer extends React.Component {
        constructor(props) {
          super(props);
          this.state = { answered: false };
          this.answerQuestion = this.answerQuestion.bind(this);
        }
        answerQuestion({target}){
          let answer = target.value === 'true' ? true : false;
          this.setState({ answered: true, answer });
        }
        render() {
          if(this.state.answered) {
            return <p>You already answered this question ({this.state.answer ? 'yes' : 'no'})</p>
          }
          return <Question label={this.props.label} answerQuestion={this.answerQuestion}/>
        }
      }

      ReactDOM.render(
        <Survey/>,
        document.getElementById('app')
      );

    </script>
  </body>
</html>
	<!doctype html>
	<html>
	<head>
	<title>React</title>
	</head>
	<body>
	<script src="https://unpkg.com/react@16.2.0/umd/react.development.js"></script>
	<script src="https://unpkg.com/react-dom@16.2.0/umd/react-dom.development.js"></script>
	<script src="https://unpkg.com/babel-standalone@6.24.2/babel.min.js" charset="utf-8"></script>
	<script src="https://unpkg.com/fetch@1.1.0/lib/fetch.js" charset="utf-8"></script>

	<div id="app"></div>

	<script type="text/babel">
	class Survey extends React.Component {
	constructor(props) {
	super(props);
	this.state = {
	questions: [ 'Do you like bananas ?', 'Are you a developer ?' ]
	};
	}
	render() {
	return (
	<React.Fragment>
	{ this.state.questions.map((question, index) => <QuestionContainer key={index} label={question}/>) }
	</React.Fragment>
	);
	}
	}

	const Question = props =>
	<p>
	<span>{props.label}</span>
	<label><input type="radio" name="answer" value="true" onChange={props.answerQuestion}/>Yes</label>
	<label><input type="radio" name="answer" value="false" onChange={props.answerQuestion}/>No</label>
	</p>

	class QuestionContainer extends React.Component {
	constructor(props) {
	super(props);
	this.state = { answered: false };
	this.answerQuestion = this.answerQuestion.bind(this);
	}
	answerQuestion({target}){
	let answer = target.value === 'true' ? true : false;
	this.setState({ answered: true, answer });
	}
	render() {
	if(this.state.answered) {
	return <p>You already answered this question ({this.state.answer ? 'yes' : 'no'})</p>
	}
	return <Question label={this.props.label} answerQuestion={this.answerQuestion}/>
	}
	}

	ReactDOM.render(
	<Survey/>,
	document.getElementById('app')
	);

	</script>
	</body>
	</html>