Pfthb

I am fairly new to ReactJS. For a small project I am building, I have created a component which returns a value when a card item is clicked. The goal is to build a multi step form.

So far it works as expected but I am pretty sure I am not following best practices.

Especially the 3 event listeners seems to be to repetitive.

Does someone more experienced has suggestions on how to improve the code? Many thanks for your support. :)

 import React from 'react';
 import PropTypes from 'prop-types';
 import withStyles from '@material-ui/core/styles';
 import Grid from '@material-ui/core/Grid';
 import Paper from '@material-ui/core/Paper';

 // Styles for grid items/cards
 const styles = theme => (
 root: 
 flexGrow: 1,
 ,
 paper: 
 height: 250,
 width: 200,
 margin: 20,
 ,
 );

 // COMPONENT
 export class Form1 extends React.Component 
 state = 
 spacing: '0',
 step: 1,
 optionStep1: ''
 ;

 // METHODS 
 // Proceed to next step
 nextStep = () => 
 const step = this.state;
 this.setState( 
 step: step + 1
 );
 

 // Previus step
 prevStep = () => 
 const step = this.state;
 this.setState( 
 step: step - 1
 );
 

 // Change Option of Step 1
 constructor(props) 
 super(props);
 this.state = 
 optionStep1: ''
 ;

 // This binding is necessary to make `this` work in the callback
 this.handleClick1 = this.handleClick1.bind(this);
 this.handleClick2 = this.handleClick2.bind(this);
 this.handleClick3 = this.handleClick3.bind(this);
 

 // Eventlisteners
 handleClick1() 
 this.setState(state => (
 optionStep1: 'option 1 picked'
 )
 );
 console.log('option 1 picked');
 

 handleClick2() 
 this.setState(state => (
 optionStep1: 'option 2 picked'
 )
 );
 console.log('option 2 picked');
 

 handleClick3() 
 this.setState(state => (
 optionStep1: 'option 3 picked'
 )
 );
 console.log('option 3 picked');
 

 // RENDER
 render() 
 const classes = this.props;
 const spacing = this.state;

 return (
 <Grid container className=classes.root spacing=16>
 <Grid item xs=12>
 <Grid container className=classes.demo justify="center" spacing=Number(spacing)>
 <Grid onClick=this.handleClick1>
 <Paper className=classes.paper />
 </Grid>
 <Grid onClick=this.handleClick2>
 <Paper className=classes.paper />
 </Grid>
 <Grid onClick=this.handleClick3>
 <Paper className=classes.paper />
 </Grid>
 </Grid>
 </Grid>
 </Grid>
 );
 
 

 Form1.propTypes = 
 classes: PropTypes.object.isRequired,
 ;

 export default withStyles(styles)(Form1);

You are exporting your component twice, you must have gotten an error about this somewhere. You can just write it like this using ES6 arrow functions:

import React, Component from 'react';

class Form1 extends Component 
 state = 
 spacing: '0',
 step: 1,
 optionStep1: ''
 ;


 render() 
 return (
 <div>
 <SurveyForm />
 </div>
 );
 


export default Form1;

You are making use of the Babel plugin that comes with create-react-app to initialize state, but then down a few lines you go and write out the constructor() in the classical way, initializing state twice.

After you initialize state, if you are changing that state you need to use this.setState(). I would also recommend using redux-form library.