It is my first time working with ReactJS in a Rails solution and the task is an emergency request that doesn’t give me enough time to learn React before taking up the sprint to work on. The Backend is a JSON (API) solution and I have been able to write a ReactJS to render the GET endpoint to list the Tasks in the database. However, when I got to the point of submitting a form with ReactJS for a POST endpoint, nothing happened. My inputs do not save into the Database and the form did not disappear to the Task list endpoint. I do not know what I am doing wrong. However, below is code snippets to my solution.
controller/api/v1/tasks_controller.rb
JavaScript
x
30
30
1
# frozen_string_literal: true2
3
module Api4
module V15
class TasksController < ApiController6
include StrongParameters7
8
def index9
@task = Task.all.load10
render json: @task11
end12
13
def create14
@task = Task.create!(create_action_params)15
if @task16
render json: @task17
else18
render json: @task.errors19
end20
end21
22
private23
24
def create_action_params25
params.require(:task).permit(permitted_task_attributes)26
end27
end28
end29
end30
config/route.rb
JavaScript
1
16
16
1
# frozen_string_literal: true2
3
Rails.application.routes.draw do4
# For React5
root 'homepage#index'6
get '/new_task' => 'homepage#index'7
8
# For API Backend9
namespace :api do10
namespace :v1 do11
get 'tasks/index'12
post 'tasks/create'13
end14
end15
end16
model/task.rb
JavaScript
1
7
1
# frozen_string_literal: true2
3
class Task < ApplicationRecord4
validates :avatar_url, presence: true5
validates :description, presence: true6
end7
views/homepage/index.htnl.erb
This is empty file
views/layout/application.html.erb
JavaScript
1
18
18
1
<!DOCTYPE html>2
<html>3
<head>4
<title>Title</title>5
<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">6
<%= csrf_meta_tags %>7
<%= csp_meta_tag %>8
9
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>10
<%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>11
<%= javascript_pack_tag 'Index' %>12
</head>13
14
<body>15
<%= yield %>16
</body>17
</html>18
app/javascript/components/App.jsx
JavaScript
1
5
1
import React from "react";2
import Routes from "../routes/Index";3
4
export default props => <>{Routes}</>;5
app/javascript/components/NewTask.jsx
JavaScript
1
125
125
1
import React from "react";2
import {Link} from "react-router-dom";3
4
class NewTask extends React.Component {5
constructor(props) {6
super(props);7
this.state = {8
avatar_url: props.post.avatar_url,9
description: props.post.description10
};11
12
this.onChange = this.onChange.bind(this);13
this.onSubmit = this.onSubmit.bind(this);14
this.stripHtmlEntities = this.stripHtmlEntities.bind(this);15
}16
17
stripHtmlEntities(str) {18
return String(str)19
.replace(/</g, "<")20
.replace(/>/g, ">");21
}22
23
onChange(event) {24
this.setState({ [event.target.avatar_url]: event.target.value });25
}26
27
onSubmit(event) {28
event.preventDefault();29
const url = "api/v1/tasks/create";30
const { avatar_url, description } = this.state;31
32
if (avatar_url.length === 0 || description.length === 0)33
return;34
35
const body = {36
avatar_url,37
description: description.replace(/n/g, "<br> <br>")38
};39
40
const token = document.querySelector('meta[name="csrf-token"]').content;41
fetch(url, {42
method: "POST",43
headers: {44
"X-CSRF-Token": token,45
"Content-Type": "application/json"46
},47
body: JSON.stringify(body)48
})49
.then(response => {50
if (response.ok) {51
return response.json();52
}53
throw new Error("Network response was not ok.");54
})55
.then(response => this.props.history.push(`/new_task/${response.id}`))56
.catch(error => console.log(error.message));57
}58
59
render() {60
return (61
<>62
<nav className="navbar navbar-expand-lg navbar-dark task-navbar-color">63
<div className="container">64
<div className="navbar-header">65
<p className="navbar-brand">Add Task</p>66
</div>67
<div>68
<ul className="nav navbar-nav navbar-right">69
<li>70
<Link to="/">71
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"72
fill="currentColor" className="bi bi-arrow-left text-white" viewBox="0 0 16 16">73
<path fill-rule="evenodd"74
d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z"/>75
</svg>76
</Link>77
</li>78
</ul>79
</div>80
</div>81
</nav>82
<div className="container mt-5">83
<div className="row">84
<div className="col-sm-12 col-lg-6 offset-lg-3">85
<h1 className="font-weight-normal mb-5">86
Add a new task to our awesome task collection.87
</h1>88
<form onSubmit={this.onSubmit}>89
<div className="form-group">90
<label htmlFor="taskAvatar">Avatar URL</label>91
<input92
type="url"93
name="task[avatar_url]"94
value={this.state.value}95
className="form-control"96
required97
onChange={this.onChange}98
/>99
</div>100
<label htmlFor="description">Task Description</label>101
<textarea102
className="form-control"103
name="task[description]"104
value={this.state.value}105
rows="5"106
required107
onChange={this.onChange}108
/>109
<button type="submit" value="Save" className="btn btn-primary mt-3">110
Add Task111
</button>112
<Link to="/" className="btn btn-link mt-3">113
Back to tasks114
</Link>115
</form>116
</div>117
</div>118
</div>119
</>120
);121
}122
}123
124
export default NewTask;125
app/javascript/packs/Index.jsx
JavaScript
1
15
15
1
import React from "react";2
import { render } from "react-dom";3
import 'bootstrap/dist/css/bootstrap.min.css';4
import $ from 'jquery';5
import Popper from 'popper.js';6
import 'bootstrap/dist/js/bootstrap.bundle.min';7
import App from "../components/App";8
9
document.addEventListener("DOMContentLoaded", () => {10
render(11
<App />,12
document.body.appendChild(document.createElement("div"))13
);14
});15
app/javascript/routes/Index.jsx
JavaScript
1
12
12
1
import React from "react";2
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";3
import Task from "../components/Task";4
import NewTask from "../components/NewTask";5
6
export default <Router>7
<Switch>8
<Route path="/" exact component={Task} />9
<Route path="/new_task" exact component={NewTask} />10
</Switch>11
</Router>;12
When I call the API Endpoints on Postman and Insomnia, they function as expected. But when I submit inputs from ReactJS Form (i.e. NewTask.jsx), nothing saves into the database.
What am I doing wrong. I do hope somebody can help me through this.
Advertisement
Answer
Apparently, the problem lies in the onSubmit event method because it targets the avatar_url instead of form inputs attributes called name. So this is what I used to make it work.
Changed the onChange event to be:
JavaScript141onChange(event) {2this.setState({ [event.target.name]: event.target.value });3}4Correct the Form Input Attributes, to be:
JavaScript129291<form onSubmit={this.onSubmit}>2<div className="form-group">3<label htmlFor="avatar_url">Avatar URL</label>4<input5type="url"6name="avatar_url"7value={this.state.value}8className="form-control"9required10onChange={this.onChange}11/>12</div>13<label htmlFor="description">Task Description</label>14<textarea15className="form-control"16name="description"17value={this.state.value}18rows="5"19required20onChange={this.onChange}21/>22<button type="submit" value="Save" className="btn btn-primary mt-3">23Add Task24</button>25<Link to="/" className="btn btn-link mt-3">26Back to tasks27</Link>28</form>29