I want to validate the input on the HOCs, I made a simple component with the input and the hock itself, which returns the error object (to the original component) but the problem with the state change in getDerivedStateFromProps. 1. Immunity policy, we return a new object of state 2. I have the same errors with concat at each stage (it is necessary to sort out the object and delete the same properties) OCC code

import React, { Component } from 'react'; import Email from '../components/Email'; export const EmailHOC = (Email) =>{ return class extends Component{ constructor(props){ super(props) this.getDataFromHandelInput= this.getDataFromHandelInput.bind(this); this.getDataFromInputRepeat = this.getDataFromInputRepeat.bind(this); } state={ error: [], email : "", repeatEmail: "" } getDataFromHandelInput = (event, value) => { const inputChangeValue = event.target.value.substr(0,20); if(inputChangeValue !== this.state.email){ this.setState({ email : inputChangeValue }) } } getDataFromInputRepeat = (event, value) => { const inputRepeatChange = event.target.value.substr(0,20) if(inputRepeatChange !== this.state.repeatEmail){ this.setState({ repeatEmail : inputRepeatChange }) } } static getDerivedStateFromProps(props, nextState, prevState) { const reg = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; console.log(props) //console.log(nextState.email); //console.log(nextState.repeatEmail); //const arrayWithErrors = prevState.error.filter(error => error !== "This field might be contain more than 6 symbols"); //console.log(arrayWithErrors) const arrayWithErrors = nextState.error; console.log(`NEXTSTATE ${arrayWithErrors}`) if((nextState.email.length < 6 )&&(prevState===[] || prevState !== "This field might be contain more than 6 symbols")){ return nextState.error = nextState.error.concat("This field might be contain more than 6 symbols"); } if(reg.test(nextState.email) === false){ nextState.error = nextState.error.concat("Please, check your email"); }; if(reg.test(nextState.repeatEmail) === false){ nextState.error = nextState.error.concat("Please, repeat right email"); } return nextState.error } render(){ const { user } = this.props; const { error } = this.state; //console.log("ERROR", error) return( <Email {...this.props} getDataFromHandelInput={this.getDataFromHandelInput} getDataFromInputRepeat={this.getDataFromInputRepeat} error={error} /> ) } } } const EmailValidation = EmailHOC(Email); export default EmailValidation;

    0