How to create components from another base component

Asked

Viewed 165 times

0

The idea is to create a component for each type of input, for example, InputPassword for <input type="password">, however, in order to reuse code, most of these components have an equal basis, all have a <div> as container, have an element <input> and an element <label>, so I created a base class:

import React, { Component } from 'react';

export default class Input extends Component {
    constructor(props, context, data) {
        this.data = data;

        super(props, context);
    }

    render() {
        return (
            <div className={`input-field col ${this.data.size || ''}`}>
                {this.data.leftIcon ? <i className={`${this.data.leftIcon} prefix left`}></i> : ''}

                <input
                    type={this.data.type}
                    value={this.data.value}
                    id={`input-${this.data.type}-${Input.prototype.counter}`}
                    className={this.data.validate ? 'validate' : ''}
                />

                <label for={`input-${Input.prototype.counter}`}>
                    {this.data.label || ''}
                </label>

                {this.data.rightIcon ? <i className={`${this.data.rightIcon} prefix right`}></i> : ''}
            </div>
        );
    }
}

Input.prototype.counter = Input.prototype.counter || 0;

And a component for passwords:

import React from 'react';

import Input from './Input';

export default class InputPassword extends Input {
    constructor(props, context) {
        super(props, context, {
            type: 'password',
            value: '',
            size: this.props.size,
            placeholder: 'Digite sua senha',
            label: 'Senha',
            disabled: false,
            rightIcon: 'fas fa-eye',
            validate: true,
            helperText: '',
            successText: 'Senha válida',
            errorText: 'Senha inválida',
        });
    }
}

This way it is possible to make small changes in the base without having to change in several places, but when trying to use this (InputPassword) get the bug:

Failed to Compile

./src/Components/Inputs/Inputpassword.js

Line 3: 'Input' is not defined no-undef

Search for the Keywords to Learn more about each error.

This error occurred During the build time and cannot be dismissed.

Note: I am using Materializecss (v1) and Fontawesome (v5.5)

react web-component
  • 1

    The component "inheritance" in this way can be treated with high order Components, which are basically functions that receive a component and return this improved component. There are some examples like this one I think they can shed some light on what you want to do

1 answer

1


The best way to achieve this result with React is by using composition (by the way, component inheritance is not recommended in React).

What you can do in a simplified way:

class Input extends React.Component{
    render(){
         return(
             <div>
                 <label>{this.props.label}</label>
                 <input type={this.props.inputType} />
             </div>
         )
    }
}

class InputText extends React.Component {
     render(){
          return <Input inputType='text' label='Texto' />
     }
}
// exemplo com functional-stateless components
const InputPass = props => <Input inputType='password' label='Senha' />

More references: https://reactjs.org/docs/composition-vs-inheritance.html

Browser other questions tagged react web-component

You are not signed in. Login or sign up in order to post.