Current save point, working on question component of react

app/assets/javascripts/components/questionsView.js.jsx

@@ -0,0 +1,57 @@
+class QuestionView extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      questions: []
+    };
+  }
+
+  // componentDidMount() {
+  //   this.fetchQuestions();
+  // }
+  //
+  // fetchQuestions() {
+  //   $.ajax({
+  //     url: '/questions',
+  //     method: 'get',
+  //     dataType: "json"
+  //   })
+  //   .done((response) => {
+  //     this.setState({
+  //       questions: response
+  //     });
+  //   });
+  // }
+
+  render() {
+    debugger
+    return (
+      <div><QuestionsList questions={this.props.questions} /></div>
+    );
+  }
+}
+
+function QuestionsList(props) {
+  return (
+    <div className="container">
+      <ul>
+        {props.questions.map(function(question, i) {
+          return <Question key={i} question={question}/>
+        })}
+      </ul>
+    </div>
+  )
+}
+
+function Question(props) {
+  return (
+    <td>
+      <div className="question">
+        <a href='/questions/<%= question.id %>'><span className="question-title">{props.question.title}</span></a>
+        <p> asked by
+        <a href='<%= "/users/#{question.author.id}" %>'><span className="author-name">{props.question.author.username}</span></a>
+        </p>
+      </div>
+    </td>
+  )
+}

app/controllers/questions_controller.rb

@@ -1,6 +1,10 @@
 class QuestionsController < ApplicationController
   def index
     @questions = Question.all
+    render do |format|
+      format json: @questions, status: 200
+      format html: index.html.erb
+    end
   end
 
   def new

app/views/questions/index.html.erb

@@ -1,27 +1,7 @@
-
-
 <h1>Questions</h1>
 
-
-<nav>
-
-</nav>
-
-
-<div class="container">
-  <ul>
-  <% @questions.each do |question| %>
-
-  <td>
-    <div class="question">
-
-      <a href='/questions/<%= question.id %>'><span class="question-title"><%= question.title %></span></a>
-      <p> asked by
-        <a href='<%= "/users/#{question.author.id}" %>'><span class="author-name"><%= question.author.username %></a> 
-      </p>
-    </div>
-  </td>
-    <br>
-  <% end %>
-  </ul>
-</div>
+<section>
+  <div class="container">
+    <%= react_component('QuestionView', questions: Question.all.as_json(include: :author), prerender:true) %>
+  </div>
+</section>