How to use same lines of code in all components in react?

Question

I am doing a react app in which four components share some same line so how can i wrap those lines and use in all components:

class PersonalInformation extends Component{
render(){
return(
  <div className="form-place">
    <h3>Personal Information</h3>
    <Form onSubmit={this.props.handleSubmit} ref="form">
      <fieldset disabled={this.props.disabled}>
        <Input type="text" name="firstName" title="FirstName" value=""/>
        <Input type="text" name="lastName" title="LastName" value=""/>
        <Input type="text" name="fatherName" title="Fathers's Name" value=""/>
        <Input type="text" name="motherName" title="Mother's Name" value=""/>
      </fieldset>
      <button>{this.props.buttonName}</button>
    </Form>
  </div>
)
}
}

Here the lines below are common in all components so how i can i reuse these lines in all components:

<Form onSubmit={this.props.handleSubmit} ref="form">
  <fieldset disabled={this.props.disabled}>

  </fieldset>
  <button>{this.props.buttonName}</button>
</Form>

Panther · Accepted Answer · 2017-08-20 17:49:49Z

You can create a Form component containing the common code

import Form from '..yourlibrary'; //your form library here
const MyForm = (props) => (
 <Form onSubmit={props.handleSubmit}>
   <fieldset disabled={props.disabled}>{props.children}</fieldset>
   <button>{props.buttonName}</button>
</Form>)
export default MyForm;

Then use it like this

import MyForm from './form'; // or whatever is your path

class PersonalInformation extends Component{
  render(){
    return(
     <div className="form-place">
      <h3>Personal Information</h3>
       <MyForm onSubmit={this.props.handleSubmit}
             ref="form"
             disabled={this.props.disabled}
             buttonName={this.props.buttonName}>
         <Input type="text" name="firstName" title="FirstName" value=""/>
         <Input type="text" name="lastName" title="LastName" value=""/>
         <Input type="text" name="fatherName" title="Fathers's Name" value=""/>
         <Input type="text" name="motherName" title="Mother's Name" value=""/>
      </MyForm>
     </div>);
   }
}

Here, the set of Input will be passed as children to MyForm component.

Collectives™ on Stack Overflow

How to use same lines of code in all components in react?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related