FirstAnswers.js

import button from '../../css/styles/Button.css'

export default class FirstAnswers extends React.Component {
  render() {
    return (
      <button
        className={button.answerButton}> woo {this.props.answer}</button>
    )
  }
}

FirstAnswers.propTypes = {
  answer: React.PropTypes.string
}

Main.js

import styles from '../../css/styles/Main.css'
import button from '../../css/styles/Button.css'
import {render} from 'react-dom'
import {Router, Route, Link, browserHistory} from 'react-router'
import SecondAnswers from './SecondAnswers.js';
let path = require('path');
let apiData = path.resolve(__dirname, '..', '..', '/utils', 'api.js')
let axios = require('axios');
import FirstAnswers from './FirstAnswers.js'

export default class Main extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      quizQuestions: [],
      answeredSelected: false,
      firstQuestion: "",
      secondQuestion: "",
      thirdQuestion: "",
      fourthQuestion: "",
      fifthQuestion: "",
      sixthQuestion: "",
      seventhQuestion: "",
      eigthQuestion: "",
      selectedFirstAnswer: '',
      selectedSecondAnswer: '',
      selectedThirdAnswer: '',
      selectedFourthAnswer: '',
      selectedFifthAnswer: '',
      selectedSixthAnswer: '',
      selectedSeventhAnswer: '',
      selectedEigthAnswer: ''
    }
  }
  componentWillMount() {
    axios.get(apiData).then((data) => {
      this.setQuestionsState(data);
    });
  }

  setQuestionsState(data) {
    let pastQuestionsState = this.state.quizQuestions;
    let newQuestionState = pastQuestionsState.concat(data.data);
    this.setState({quizQuestions: newQuestionState});
  }

  renderFirstQuestion() {
    let quizQuestions = this.state.quizQuestions;
    if(quizQuestions.length > 1) {
      let firstQuestion = quizQuestions[0].question;
      this.passDownPropsToSecondAnswers()
      return (
        <div>
          {firstQuestion}
          {this.firstAnswers()}
        </div>
      )
    }
    else {
      return (
        <div> Loading First Question</div>
      )
    }
  }

  passDownPropsToSecondAnswers() {
    console.log("cloning element", this.props)
    React.cloneElement(this.props.children, {
      answer: this.state.quizQuestions[1].question
    })
  }

  firstAnswers() {
    let firstAnswerObj = this.state.quizQuestions[0].answers
    let getKeysFromAnswers = Object.keys(firstAnswerObj);
    let renderedAnswers = getKeysFromAnswers.map((answer) => {
      return (
        <div>
          <FirstAnswers
            answer = {answer}
            />
        </div>
      )
    })
    return (
      <div>
        {renderedAnswers}
      </div>
    )
  }

  renderSecondQuestion() {
    let quizQuestions = this.state.quizQuestions;
    if(quizQuestions.length > 1) {
      let secondQuestion = quizQuestions[1].question;
      return (
        <div>
          {secondQuestion}
          {this.secondAnswers()}
        </div>
      )
    }
    else {
      return (
        <div> Loading Second Question</div>
      )
    }
  }

  secondAnswers() {
    let secondAnswerObj = this.state.quizQuestions[1].answers
    let getKeysFromSecondAnswers = Object.keys(secondAnswerObj);
    let renderedSecondAnswers = getKeysFromSecondAnswers.map((answer) => {
      return (
        <SecondAnswers answer={answer}>
          {answer}
        </SecondAnswers>
      )
    });
    return (
      <div>{renderedSecondAnswers}</div>
    )
  }

  render() {

    return (
      <div>
        {this.renderFirstQuestion()}
      </div>
    )
  }
}

render((
  <Router history={browserHistory}>
    <Route path="/" component={Main}>
      <Route path="second" component={SecondAnswers} />
    </Route>
  </Router>
), document.getElementById('main'));

SecondAnswers.js

import button from '../../css/styles/Button.css'

export default class SecondAnswers extends React.Component {
  render() {
    console.log("your props nigga", this.props.answer)
    return (
      <div>
        wooo
       {this.props.answer}
      </div>
    )
  }
}

SecondAnswers.propTypes = {
  answer: React.PropTypes.string,
  secondQuestion: React.PropTypes.func
}