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
Post a Comment