state callback firing objects are not valid error

Question

I am trying to use callback that will validate an input.

When I am trying to type in the textbox, I am having the error below. Can someone help why I am having the error and how I can correct it.

Is callback not allowed? What am I missing?

Uncaught Error: Objects are not valid as a React child (found: object with keys {dispatchConfig, _targetInst, nativeEvent, type, target, currentTarget, eventPhase, bubbles, cancelable, timeStamp, defaultPrevented, isTrusted, isDefaultPrevented, isPropagationStopped, _dispatchListeners, _dispatchInstances}). If you meant to render a collection of children, use an array instead. in div (created by HelloWorldWithPropertiesES5) in HelloWorldWithPropertiesES5 (created by Parent2) in Parent2 (created by App) in div (created by App) in App at invariant (react-dom.development.js:55)

    import * as React from 'react';
interface IProps{
    userName?:string
}
const HelloWorldWithPropertiesES5= (props:IProps)=>{   
    return (
        <div>
            Hello {props.userName}
        </div> 
    )
    }

    export default HelloWorldWithPropertiesES5;

---

   import * as React from 'react'

interface IProps {
    userName : string;
    onChange : (event:any) => void;

  }

  export const NameEditComponent = (props : IProps) => 
  <>
  <h2>this shows event changes</h2>
    <label>Update name:</label>
    <input value={props.userName} 
           onChange={props.onChange}
    />

  </>

export default NameEditComponent;

---

 import * as React from 'react';
import HelloWorldWithPropertiesES5 from 'src/Lesson2-Properties/HelloES5';
import NameEditComponent from './MyChild';

interface IState {
  userName : string;
}

export class Parent2 extends React.Component<{},IState> {
  constructor(props:any) {
    super(props);

    this.state = {userName: 'defaultUserName'};
  }

  public setUsernameState = (newName:string) => {
          this.setState({userName:newName},()=>this.validateName());
    }



      public validateName () {
        if (this.state.userName.length === 0) {
         alert('error')

        }
      }

  public render() {
    return (
        <>
      <HelloWorldWithPropertiesES5 userName={this.state.userName} />
      <NameEditComponent userName={this.state.userName} onChange={this.setUsernameState} />
    </>
    );
  }
}

export default Parent2;

Answer 1

The handler is returning the event, not the value directly.
I'm not a typescript expert so maybe my types in the signature are a bit off but it should be something like this:

public setUsernameState = (event: object) => {
  this.setState({ userName: event.target.value }, () => this.validateName());
}

Answer 2

1. Try to validate your username before calling setState method
2. I think that input's onChange method is pushing event variable to your handler and event is not a string. So maybe in your setUsernameState you need to get a value of the input like event.target.value

Wrapping up... I think that your wrappper should look more like:

public setUsernameState = (event) => {
  const {newName} = event.target;
  if (!this.validateName(newName)) {
    customMethodToSetErrors();
  }
  this.setState({userName: newName});
}

EDIT:

sorry,, I did not know what setState's callback does... So your callback is fine and your problem should be only handler's argument type and the way that you are getting a new value :) So just try to get a new value from event object argument.