import React, { Component, forwardRef, useRef, useEffect, useImperativeHandle, useState } from 'react';
class App extends Component {
  state = { visible: false }
  refs = {}
  handleClick = () => {
        let keys = this.refs.keys()
        let visible = keys.every(ref=>this.refs[ref].initializeMessage());
        this.setState({ visible });
  };
  render(){
    return(
      <wrappedInput value={1} ref={ref1=>this.refs[ref1]} />
      <wrappedInput value={2} ref={ref2=>this.refs[ref2]} />
      <wrappedInput value={3} ref={ref3=>this.refs[ref3]} />
      <MessageBox visible={this.state.visible} />
      <button onClick={this.handleClick} />
    );
  }
}

const wrappedInput = forwardRef((props, ref) => {
  const [ error, setError ] = useState(false);
  const [ message, setMessage ] = useState("");
  useEffect(()=>{
    if(error){
      setMessage("oops");
      return error
    }
  }, [error]);
  input = useRef();
  useImperativeHandle(ref, ()=>({
    focus: ()=>input.current.focus(),
    initializeMessage: ()=>{
      if(props.value is incorrect) {
        setError(true)
      } else {
        setError(false)
      }
    }
  }));
  return(
    <div>
      <input
        ref={ref}
        value={props.value}
      />
      <Icon className={`iconClass ${error ? "errorIcon" : ""}`}>
    </div>
  );
});