[change] Create reusable function for errors

[nemesifier]

Right now we are including a lot of code like:

{errors.username && (
  <div className="error">
    <span className="icon">!</span>
    <span className="text">{errors.username}</span>
  </div>
)}

Maybe we can create an utility function (not sure if it's worth it to have another component for this as it will complicate the tree a lot) for this? This would give us the following advantages:

• bring down size a bit (these lines are repated in almost all components)
• make it easy to change the style of errors

I am thinking of something like:

fieldError (errors, key) => {
  (
    {errors[key] ? (
      <div className="error">
        <span className="icon">!</span>
        <span className="text">{errors[key]}</span>
      </div>
    ) : ''}
  );
}

[totallynotvaishnav]

Can I work on this?

[nemesifier]

Can I work on this?

Sure, go ahead 👍

[codesankalp]

Hello @iamvaishnav, Can you proceed with some other issue (because this issue needs to be fixed asap)?
I would suggest going ahead with #358 or #314 issue.

[totallynotvaishnav]

@codesankalp Yeah, sure.

[nemesifier]

@iamvaishnav take a look at #362, maybe it's something that interests you? Come to the OpenWISP support chat if you have any question or to better coordinate with us.