How can I use nested forms in ReactJS?

Question

Consider this snnipet code:

<%= form_for @survey do |f| %>
  <%= f.error_messages %>
 <p>
   <%= f.label :name %><br />
   <%= f.text_field :name %>
 </p>
  <%= f.fields_for :questions do |builder| %>
    <%= render "question_fields", :f => builder %>
  <% end %>
 <p><%= f.submit "Submit" %></p>
<% end %>

it will return me, has some hash (rails dev would know that). My question is: how can I make this format in ReactJS? Get the exact parameters that Rails defaults to. At the moment, I can only use the HTML tag in JSX. I am currently getting the parameters in the controller and sorting them according to needs (which seems like a bad approach). I tested some npm packages, but their docs don't seem to help! which includes: https://www.npmjs.com/package/react-rails-form-helpers

https://www.npmjs.com/package/react-form

Is there any npm package for this? Using react_on_rails gem with stable Rails 5

Answer 1

, .

<input type="text" name={`listing[working_time_slots_attributes][${value}][from]`}
            defaultValue={timeSlot.from} />

, - npm.

import axios from 'axios';
import serialize from 'form-serialize';

handleSubmit(event) {
  event.preventDefault();
  const formData = serialize(event.target, { hash: true });

  // alert(`A data was submitted: ${JSON.stringify(formData, null, 2)}`);
  axios.post(`/api/listings/${this.props.listing.id}/update_working_time_slots`, formData)
  .then((response) => {
    this.setState({ timeSlots: response.data.working_time_slots }); // eslint-disable-line react/no-set-state
    console.log(response); // eslint-disable-line no-console
  })
  .catch((error) => {
    console.log(error); // eslint-disable-line no-console
  });
}