How to create component hierarchy with React Native?

Question

I want to create components with Textinput, the default being my mask-free Input component, and the kids will have a mask or some other treatment.

I currently have the default input that contains only the styles and returns the raw text when typing. I also have an Input with CPF/ CNPJ mask, and at the time of exporting I am using an index.js file that only contains these two components and exports them.

index js.

import Input from './Input'
import CpfCnpj from './input-masks/InputCpfCnpj'

export { CpfCnpj }

export default Input

But I would like to use this way when you want to wear without masks:

<Input {...this.props} />

And so when you need some mask:

<Input.CpfCnpj {...this.props} />

---

One way I found it was to do it in the archive index js.

import Input from './Input'
import CpfCnpj from './input-masks/InputCpfCnpj'

Input.CpfCnpj = CpfCnpj

export default Input

I wonder if there is another way, and if that is good practice?

Answer 1

There are two ways I know of one component "inheriting" the properties of another, which is extending or placing within another.

INHERITANCE

Component "parent":

import React from 'react';

class GenericForm extends React.Component {
  constructor(props) {
    super(props);

    this.onChange = this.onChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
  }

  onChange = e => {
    const target = e.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    this.setState({
      dataForm: { ...this.state.dataForm, [e.target.name]: value}
    });
  }
}
export default GenericForm;

Child component:

class FormLogin extends GenericForm {
  constructor(props) {
    super(props);

    this.state = {
      data: {
        login: '',
        password: ''
      },
      loading: false,
      errors: {}
    };
  }
}

COMPONENT WITHIN COMPONENT

Generic table (style only)

class Table extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <table className={`${this.props.className} Table`}>
        {this.props.children}
      </table>
    )
  }
}

Specific Table: here can be added more styles, methods and other

class TableList extends Component {
  constructor(props) {
    super(props);
  }

  open() {
    // do something
  }

  render() {
    return (
      <Table className={`${this.props.className} TableList` onClick={this.open}}>
        {this.props.children}
      </Table>
    )
  }
}

So when I render "Tablelist" I will also render "Table".

<TableList className="alunos-disponiveis">
  <tr>
    <th>Nome</th>
    <th>Endereço de Partida</th>
    <th>Endereço de Regresso</th>
  </tr>
  {
    data.passengerList.map(item => (
      <tr>
        <td>{item.name}</td>
        <td>{item.localeStart.address}</td>
        <td>{item.localeFinish.address}</td>
      </tr>
    ))
  }
</TableList>