We Keep Coding

Whats the proper way to have a form submit data in a stateless react component?

I have a stateless react component that is a little pop up. It takes some data from the user, and passes that back to its parent, where it executes the work.
What is the best way for this component to have a handleSubmit() function, that takes the user input, and sends it back to the parent?
import React, { Component } from "react";
import "../../../node_modules/bulma/css/bulma.css";
const Transfer = (props, token, web3) => {
return (
<div className="modal is-active">
<div className="modal-background" onClick={props.onClick} />
<div className="modal-card">
<section className="modal-card-body">
<div className="content">
<h1 className="title"> Transfer Tokens </h1>
<p className="has-text-danger">
Requires that you are the owner of the token you are transferring
</p>
<p className="subtitle">How it works</p>
<p className="">
Enter the ID of the token you want to transfer, the address to
whom its going to, and thats it!
</p>
//problem area
<form onSubmit={props.onClickSubmit}>
<label htmlFor="text">Address to recieve token</label>
<input
name="Address"
className="input is-info "
required="true"
/>
<label htmlFor="number">Token ID</label>
<input
className="input is-info"
name="Token ID"
type="number"
required="true"
/>
<a className="button is-pulled-right">Submit</a>
</form>
</div>
</section>
<footer className="modal-card-foot is-clearfix">
<a className="button" onClick={props.onClick}>
Cancel
</a>
</footer>
</div>
</div>
);
};
export default Transfer;
I pass in as a prop, onClickSubmit, in my parent component, and that contains the logic for what I'm trying to do.
Very new to stateless react components

It will be difficult to accomplish what you want with a stateless component since you cannot use either refs or state in a stateless component. You can think of a stateless component as a pure function that returns a piece of UI depending on the props you give it.
You could instead use a stateful component and e.g. store the input values in state and call the onClickSubmit prop function with this state when the user submits the form.

If you want to build stateless forms component, I send you a lib that I'm working on:
react-distributed-forms
This allow you to build your Transfer Component this way, (pay attention to use Input instead of input and Button instead of button):
import React, { Component } from "react";
import "../../../node_modules/bulma/css/bulma.css";
import { Input, Button } from "react-distributed-forms";
const Transfer = (props, token, web3) => {
return (
<div className="modal is-active">
<div className="myForm">
<label htmlFor="text">Address to receive token</label>
<Input name="Address" className="input is-info " required="true" />
<label htmlFor="number">Token ID</label>
<Input
className="input is-info"
name="Token ID"
type="number"
required="true"
/>
<Button name="submit" className="button is-pulled-right">
Cancel
</Button>
</div>
</div>
);
};
export default Transfer;
And then in your parent Component, wherever it is in the hierarchy, you simply do:
<Form onSubmit={({ name }) => { console.log(name); }} onFieldChange={({ name, value} ) => { console.log(name, value); }}>
...whatever
<Transfer />
...whatever
</Form>
onFieldChange will receive every input change.
onSubmit will receive the attribute "name" on the Button when you click it.
react-distributed-forms use React context API, so you don't have to pass directly props, it just works. Is built for really dynamic forms...

ReactJS passing state to another class

i have problem in accesing the state on the other component. I am beginner in using the reactjs. I am still confuse on how to use the state and props. I am getting the input which will be set to the state as username then I will pass it to the formDetails component and use it when the handleSubmit triggers. can someone help me I would appreciate any comments, answers, suggestions.
//Components
class DaysForm extends React.Component {
constructor() {
super();
this.state = {
username: ""
};
this.updateInput = this.updateInput.bind(this);
}
onCalculate(e) {
$("#myModal").modal();
}
updateInput(event) {
this.setState({ username: event.target.value });
}
render() {
return (
<div>
<p>How many days are in a full time working week?</p>
<input
type="text"
className="form-control"
onChange={this.updateInput}
/>
<p>How many days a week will this employee work?</p>
<input type="text" className="form-control" />
<br />
<center>
<button
className="btn btn-default"
onClick={this.onCalculate.bind(this)}
>
Calculate
</button>
</center>
</div>
);
}
}
class FormDetails extends React.Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(event) {
//console.log here the state that is comming from the component
}
render() {
return (
<div>
<p>Email Address:</p>
<input type="text" className="form-control" />
<p>Business Name:</p>
<input type="text" className="form-control" />
<p>Phone Number:</p>
<input type="text" className="form-control" />
<br />
<center>
<button
className="btn btn-default"
onClick={this.handleSubmit}
>
Submit
</button>
</center>
</div>
);
}
}

From my understanding, you want to set the username in the DaysForm component, and then upon handleSubmit being clicked, it will show up in the FormDetails component. Is that correct?
Assuming so, there are a couple things missing.
First of all, you are not currently rendering FormDetails in the DaysForm. So right now, they have no relation to each other. Or at least not in the code you displayed. Are you using the username as a redux state perhaps which is share in the two components? Because this changes everything if that's the case.
The easier way to do this would be to have FormDetails be a child of DaysForm and then pass the username state as a prop in the FormDetails component. This will make it look something like this:
class DaysForm extends React.Component {
// your code
render(){
return(
<div>
<p>
How many days are in a full time working week?
</p>
<input type="text" className="form-control" onChange={this.updateInput}/>
<p>
How many days a week will this employee work?
</p>
<input type="text" className="form-control"/>
<br></br>
<center>
<button className="btn btn-default" onClick={this.onCalculate.bind(this)}>Calculate</button>
</center>
<FormDetails username={this.state.username}/>
</div>
)
}
}
However, you mentioned that the components have no relation to each other, I am assuming that there are no other components that can connect the two, so this complicates a bit when you want to pass in a state from one component to another. Based on the post's tags, I am assuming you are using Redux. If not, for this case I would encourage you to do so, since it will handle your state in between components. Of course if you haven't touched any of that yet, I will admit it is a whole new can of worms to open.
As for the difference between state and props. State usually belong to a component, you change them causing the component to rerender and they may be later passed in as a props for a child component (as shown in the example code). Props on the other hand come from other components and are immutable. See more here. The way you are using the state in DaysForm seems to be just fine and is as expected, the main challenge here is figuring out how to pass that state to FormDetails when there are no obvious other components in between them.

React-Router Link, how to trigger a click event on a Link from another component

I'm trying to set up a series of React-Router to have navigation within a certain component. I have it set up so the link tags work correctly but I'm trying to style them to look like this:
The styling is set up like this:
<div className="btn-group" data-toggle="buttons">
<label className="btn btn-primary-outline active">
<input type="radio" name="options" id="option1" autocomplete="off" checked />Payments
</label>
<label className="btn btn-primary-outline">
<input type="radio" name="options" id="option2" autocomplete="off" /> Bills
</label>
<label className="btn btn-primary-outline">
<input type="radio" name="options" id="option3" autocomplete="off" /> Charge
</label>
</div>
And the current series of Links looks like this (with no styling):
<ul>
<Link to='/options/option1'>option1</Link>
<Link to='/options/option2'>option2</Link>
<Link to='/options/option3'>option3</Link>
</ul>
The HTML (top) is written in HTML, not JSX, but that's not the issue. I am trying to combine the Link Components into the HTML above so that the options will trigger the functionality of the link tags.
In the React documentation I found this:
For communication between two components that don't have a parent-child relationship, you can set up your own global event system. Subscribe to events in componentDidMount(), unsubscribe in componentWillUnmount(), and call setState() when you receive an event. Flux pattern is one of the possible ways to arrange this.
So this gave me the idea of putting the Link tags inside of their respective labels, giving them a style of {{display: 'none'}}, and having the clicks on the radio buttons trigger a click on the respective Link tag. That would ensure all the same functionality happens that we'd expect from the Link tag (pushing to browser history etc).
However, the following is not working:
<label className="btn btn-primary-outline active" onClick={() => document.getElementById('linkToOption1').click() }>
<Link to='/options/option1' id="linkToOption1" style={{display: 'none'}}>Option1</Link>
<input type="radio" name="options" id="option1" autoComplete="off" defaultChecked />Option1
</label>
In the previous example you can see I created an onClick event handler that selects the id of the Link tag and triggers a click.

I was able to solve my problem so I am posting what worked for me. Please answer or comment if there's changes or a better solution.
I wasn't able to trigger a click event on a Link, but I was able to simulate the aspects that I needed.
For this to work I needed the following:
on a click event push to browserHistory to update the route
link the 'active' css class to the current view/URL (I accomplished this through component state)
update the state whenever the url is changed (modified state on window popstate event, and also update the currentView state on component will mount)
This results in the ability for the correct tab to be highlighted when a tab is clicked, when the url is manually changed to a certain route, and when the browsers back / forward buttons are used.
This is all the code in my navmenu file that creates a pretty cool navigation component and works with react-router and browserHistory.
import React, { Component, PropTypes } from 'react'
import { Link, browserHistory } from 'react-router'
class Navmenu extends Component {
constructor(props) {
super(props)
this.state = { currentView: '' }
this.getClasses.bind(this)
}
// in case of url being manually set, figure out correct tab to highlight
// add event listener to update the state whenever the back/forward buttons are used.
componentWillMount() {
this.changeLocation()
window.addEventListener('popstate', this.changeLocation.bind(this))
}
componentWillUnmount() {
window.removeEventListener('popstate', this.changeLocation.bind(this))
}
// update state based on the URL
changeLocation() {
const path = window.location.pathname.split('/')
const currentView = path[path.length - 1]
this.setState({ currentView })
}
// update state and update react-router route
navigateToRoute(route) {
this.setState({ currentView: route })
browserHistory.push(`/options/${route}`)
}
// give correct tab the 'active' bootstrap class
getClasses(link) {
let classes = 'btn btn-primary-outline flex-button'
if (this.state.currentView === link) {
classes += ' active'
}
return classes
}
render() {
return (
<div className="btn-group flex-navbar" data-toggle="buttons">
<label className={this.getClasses('option1')} onClick={() => this.navigateToRoute('option1')}>
<input type="radio" name="options" id="option1" autoComplete="off" defaultChecked />option1
</label>
<label className={this.getClasses('option2')} onClick={() => this.navigateToRoute('option2')}>
<input type="radio" name="options" id="option2" autoComplete="off" /> option2
</label>
<label className={this.getClasses('option3')} onClick={() => this.navigateToRoute('option3')}>
<input type="radio" name="options" id="option2" autoComplete="off" /> option3
</label>
</div>
)
}
}
export default Navmenu

Multiple Registration Form with redux and react

I have been trying to develop a dashboard form similiar to airbnb listing form for understanding more deeply about react redux but i am stuck in the middle of my project. I have a multiple form where when user clicks on continue button the user will get another form to fill and so on and if user clicks on back button the user will get form of one step back with previously filled values. I could not decide what should i do for this. Do i have to create a object in action as listingName . summary, name, email etc as empty value and update it with reducer using Object.assign() or what. Till now i could only develop like when user clicks on personal tab a form related to personal information is shown and when user clicks on basic tab, a form related to basic information is shown. I want all form data to be send to server at last submit. What should i do now ? Do i use increment and decrement action for the continue and back button and use submit action on the last form button ? Could you please provide me an idea ?
Here's my code
actions/index.js
export function selectForm(form){
return{
type: 'FORM_SELECTED',
payload: form
};
}
reducers/reducer_active_form.js
export default function(state=null, action){
let newState = Object.assign({},state);
switch(action.type){
case 'FORM_SELECTED':
return action.payload;
}
return state;
}
reducers/reducer_form_option.js
export default function(){
return[
{ option: 'Personal Information', id:1},
{ option: 'Basic Information', id:2 },
{ option: 'Description', id:3},
{ option: 'Location', id:4},
{ option: 'Amenities', id:5},
{ option: 'Gallery', id:6}
]
}
containers/form-details
class FormDetail extends Component{
renderPersonalInfo(){
return(
<div className="personalInfo">
<div className="col-md-4">
<label htmlFor='name'>Owner Name</label>
<input ref="name" type="textbox" className="form-control" id="name" placeholder="Owner name" />
</div>
<div className="col-md-4">
<label htmlFor="email">Email</label>
<input ref="email" type="email" className="form-control" id="email" placeholder="email" />
</div>
<div className="col-md-4">
<label htmlFor="phoneNumber">Phone Number</label>
<input ref="phone" type="textbox" className="form-control" id="phoneNumber" placeholder="phone number" />
</div>
<div className="buttons">
<button className="btn btn-primary">Continue</button>
</div>
</div>
);
}
renderBasicInfo(){
return(
<div>
<h3>Help Rent seekers find the right fit</h3>
<p className="subtitle">People searching on Rental Space can filter by listing basics to find a space that matches their needs.</p>
<hr/>
<div className="col-md-4 basicForm">
<label htmlFor="price">Property Type</label>
<select className="form-control" name="Property Type" ref="property">
<option value="appartment">Appartment</option>
<option value="house">House</option>
</select>
</div>
<div className="col-md-4 basicForm">
<label htmlFor="price">Price</label>
<input type="textbox" ref="price" className="form-control" id="price" placeholder="Enter Price" required />
</div>
<div className="buttons">
<button className="btn btn-primary">Back</button>
<button className="btn btn-primary">Continue</button>
</div>
</div>
);
}
renderDescription(){
return(
<div>
<h3>Tell Rent Seekers about your space</h3>
<hr/>
<div className="col-md-6">
<label htmlFor="listingName">Listing Name</label>
<input ref="name" type="textbox" className="form-control" id="listingName" placeholder="Be clear" />
</div>
<div className="col-sm-6">
<label htmlFor="summary">Summary</label>
<textarea ref="summary" className="form-control" id="summary" rows="3"></textarea>
</div>
<div className="buttons">
<button className="btn btn-primary">Back</button>
<button className="btn btn-primary">Continue</button>
</div>
</div>
);
}
renderLocation(){
return(
<div>
<h3>Help guests find your place</h3>
<p className="subtitle">will use this information to find a place that’s in the right spot.</p>
<hr/>
<div className="col-md-6">
<label htmlFor="city">City</label>
<input ref="city" type="textbox" className="form-control" id="city" placeholder="Biratnagar" />
</div>
<div className="col-md-6">
<label htmlFor="placeName">Name of Place</label>
<input ref="place" type="textbox" className="form-control" id="placeName" placeholder="Ganesh Chowk" />
</div>
<div className="buttons">
<button className="btn btn-primary">Back</button>
<button className="btn btn-primary">Continue</button>
</div>
</div>
);
}
render(){
if ( !this.props.form){
return this.renderPersonalInfo();
}
const type = this.props.form.option;
console.log('type is', type);
if ( type === 'Personal Information'){
return this.renderPersonalInfo();
}
if ( type === 'Basic Information'){
return this.renderBasicInfo();
}
if ( type === 'Description'){
return this.renderDescription();
}
if ( type === 'Location'){
return this.renderLocation();
}
}
}
function mapStateToProps(state){
return{
form: state.activeForm
};
}
export default connect(mapStateToProps)(FormDetail);

The first thing you're missing is controlled components. By giving the inputs a value property, and an onChange function, you will link the input with an external state.
Your components should have access, via react-redux, to the state and actions needed. The value of the form should be your state for that object. So you might have a state like:
location: {
listingName: '123 Main St',
summary: 'The most beautiful place!'
}
Then, you'd just pass each property to inputs. I'm assuming, in this example, that you've passed the location prop in mapStateToProps, and an actions object with all the related actions in mapDispatchToProps:
changeHandler(ev, fieldName) {
const val = ev.target.value;
this.props.actions.updateField(fieldName, val);
},
render() {
return (
<input
value={this.props.location.listingName}
onChange={(ev) => { this.changeHandler(ev, 'listingName'}}
/>
);
}
You provide it an action that can be used to update the state:
function updatefield(field, val) {
return {
type: UPDATE_FIELD,
field,
val
};
}
Then, you just merge it in, in your reducer
switch (action.type) {
case UPDATE_FIELD:
state = { ...state, [action.field]: val };
(using dynamic keys and spread operator for neatness, but it's similar to Object.assign)
All of your form state lives in the Redux store this way. When you are ready to submit that data to the server, you can either use async actions with redux-thunk, or set up some middleware to run the calls. Either way, the strategy is the same; your state lasts locally and populates all your forms, and then is sent to the server when the user submits.
I went through this pretty quick, let me know if you need me to elaborate on anything :)

As you are using react-redux you can use the redux-form. It will greatly help you with the coding as it will simplify your work load and it is also bug-free (as far as I know). In my opinion you would want to use all the libraries/frameworks provided to you as you want to be as agile as possible.
Also the redux-form has a wizard form implementation. I think that is exactly what you are looking for.
http://erikras.github.io/redux-form/#/examples/wizard?_k=yspolv
Just follow the link and you will see a very good tutorial on how to implement it. Should be a piece of cake.

React accessing children in form

I can not really access my dynamically generated children in a component. I found some cases on the internet, it seems like a common problem but nothing i could properly relate to or it was not really well documented so i got more confused.
I have a form which has a button and every time a press the button, subform is added to the form.
render: function() {
var prop_forms = [];
for(var i = 1; i <= this.state.count; i++){
prop_forms.push(<App.Form.Property reference={i}/>);
}
return(
<div>
<h2>New model</h2>
<form className="form" callback={this.submited}>
<label>Name:</label>
<input type="text" ref="name" className="fancy_input" required/>
<label><input type="checkbox" ref="include_endpoints"/> Include basic endpoints</label>
<h3>Properties <a onClick={this.add_property}><span className="glyphicon glyphicon-plus"></span></a></h3>
{prop_forms}
<button className="btn" onClick={this.submited} type="button">Add model to the canvas</button>
</form>
</div>
);
}
every time a click a button, this.state.count is incremented so I get one more App.Form.Property component. I am passing the i variable so i can use it in my ref parameter in the App.Form.Property component.
render: function(){
var input_ref = "property_"+this.props.reference+"_input";
var select_ref = "property_"+this.props.reference+"_select";
return(
<div className="property_form">
<input className="fancy_input" ref={input_ref} type="text" placeholder="Property name..."/>
<select className="fancy_select" ref={select_ref}>
<option value="string">String</option>
<option value="integer">Integer</option>
<option value="double">Double</option>
</select>
</div>
);
}
My problem is that when i submit the form, I can not access the children via ref. I can only address name and include_endpoints but nothing from the App.Form.Property component.

Add a function getSubmitData in your form component that encapsulates the children from the outer element