React

by Allie Yu

HTML

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  </head>
  <body>
  <div id="container"></div>

<!-- React -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react.js"></script>

<!-- ReactDOM -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-dom.js"></script>

<!-- Redux -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.6.0/redux.min.js"></script>

<!-- ReactRedux -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.4.6/react-redux.min.js"></script>

<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

  </body>
</html>

CSS

body {
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  display: inline;
  font: bold;
}

span {
  display: flex;
}

input[type=radio] {
  width: 26px;
  margin:0;
  -moz-appearance: none;
}

React

const questions = [
  {
    id: 1,
    text: "Favorite color",
    answers: [
      {
        id: 1,
        text: "Red",
        responses: 10
      },
      {
        id: 2,
        text: "Green",
        responses: 20
      },
      {
        id: 3,
        text: "Blue",
        responses: 5
      }
    ]
  },
  {
    id: 2,
    text: "Favorite animal",
    answers: [
      {
        id: 1,
        text: "Dog",
        responses: 150
      },
      {
        id: 2,
        text: "Cat",
        responses: 100
      },
      {
        id: 3,
        text: "Bird",
        responses: 17
      }
    ]
  }
];


class Children extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      answer: {},
      qustion: {},
      questions: []
    };

      console.log('thissssssss:', this.props);
      
     this.handleAnswerSelected = this.handleAnswerSelected.bind(this);
  }

  componentDidMount() {
    this.setState({
      answer: this.props.answer,
      qustion: this.props.question,
      questions: this.props.questions
    })
  }
  
  getDerivedStateFromProps(nextProps, state){
    console.log('dasdsadasdasd:', state);
    
  }
  
  checkStatus(answer, question){
  	this.setState({
    	question,
      answer
    })
  }

  handleAnswerSelected(questions) {
    return (
      <div>
        {
          questions.map(question => {
          	return (
            	<div key={`question_${question.id}`}>
                <h4><span>{question.id}. {question.text}</span></h4>
                <div>
                  <ul>
                    {question.answers.map(answer => {
                   	 return (
                      <li
                        key={`answer_${answer.id}`}
                        id={answer.id}
                        name={answer.responses}
                      >
                        <input className="flex-row"
                          type="radio"
                          name="radioGroup"
                         ...