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


i doing react app in 4 components share same line how can wrap lines , use in 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 lines below common in components how can reuse these lines in components:

<form onsubmit={this.props.handlesubmit} ref="form">   <fieldset disabled={this.props.disabled}>    </fieldset>   <button>{this.props.buttonname}</button> </form> 

you can create form component containing common code

import form '..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 this

import myform './form'; // or whatever 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, set of input passed children myform component.


Comments

Popular posts from this blog

ubuntu - PHP script to find files of certain extensions in a directory, returns populated array when run in browser, but empty array when run from terminal -

php - How can i create a user dashboard -

javascript - How to detect toggling of the fullscreen-toolbar in jQuery Mobile? -