Let's say we have <ErrorMessage id="sample-id"/> after suggested change.(Ignore other props for now)
There are three ways the outer component can serve as an error message in ErrorMessage (as per master code):-

1. Using render props, so the id given to ErrorMessage can't be used inside render props.
2. Using children function, so the id given to ErrorMessage can't be used inside the children function.
3. Using component prop of ErrorMessage, so the id given to ErrorMessage will work because of the way it's implemented in the code.

So giving ErrorMessage an id prop will work for 1 out of 3 scenarios.
I might be wrong here but let me know if this interpretation of suggested change was valid or not.

I will try to implement this.

The id passed to ErrorMessage need to be rendered inside the element in children {msg => <div>{msg}</div>}, and in element in render function render={msg => <div>{msg}</div>} ??

Hi i want to take on this issue. If no one is working on it.

Is anyone working on this ??

Hey , I am a beginner caan anyone help me out .

@krichter722 Can you please assign this to me? Thanks.

@ZainGulbaz No, I can't assign users to issues. There seem to be no assignments to issues in this project.

@krichter722 Thanks for the clarification. I will make a pull request then.

Can I work on this?

A property id?: string has been added to ErrorMessageProps in #3825. Afaik the id is passed to the DOM element rendered by ErrorMessage if render and children are not specified, according to this spaghetti code:

    return !!touch && !!error
      ? render
        ? isFunction(render)
          ? render(error)
          : null
        : children
        ? isFunction(children)
          ? children(error)
          : null
        : component
        ? React.createElement(component, rest as any, error)
        : error
      : null;