Creating components from another base component

Question

Creating components from another base component

Navigation

#1 by (1 votes)

0

The idea is to create a component for each input type, for example, InputPassword to <input type="password"> , but for code reuse, most of these components have an equal base, all have <div> as container, have a <input> element and a <label> element, 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',
        });
    }
}

So it is possible to make small changes in the base without having to change in several places, however when trying to use this component ( InputPassword ) I get the error:

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 can not be dismissed.

Note: I'm using MaterializeCSS (v1) and FontAwesome (v5.5)

react web-component

asked by anonymous 10.12.2018 / 15:18

1 answer

Dynamic pricing Left Join Slow in Firebird 2.0

score 1 · Accepted Answer

The best way to achieve this result with React is to use 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: link