CODEWITHSUNDEEP
javascriptreactjsjsx
jennifer
jennifer

Reputation: 752

Why won't my simple element render in this React render method?

I am getting the strange error:

Uncaught Error: Objects are not valid as a React child (found: object with keys {element}). If you meant to render a collection of children, use an array instead.

  render () {
    const pic = this.props.User.current.pic_url;
    let element;

    if(pic) {
      element = <img className = 'MenuPic light' src = {pic}></img>;
    } else {
      element = <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/></svg>;
    }
    return (
      {element}
    )
  }

Upvotes: 1

Views: 60

Answers (3)

space monkey
space monkey

Reputation: 76

You don't need to use { } around element if the interpreter is not in JSX mode.

The interpreter will not go into JSX mode unless you are in an element which begin and end with < and >.

Simply remove the { } around element.

Upvotes: 1

Aziz.G
Aziz.G

Reputation: 3721

You need only to return the element that contain already an html element 

render () {
        const pic = this.props.User.current.pic_url;
        let element;

        if(pic) {
          element = <img className = 'MenuPic light' src = {pic}></img>;
        } else {
          element = <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/></svg>;
        }
        return element;
      }

Upvotes: 1

Anil Namde
Anil Namde

Reputation: 6608

Return element that should be it. But refactored your snippet to simplify it by removing else block

render () {
  const pic = this.props.User.current.pic_url
  if (pic) {
    return (<img className='MenuPic light' src={pic} />)
  }

  return (<svg
    xmlns='http://www.w3.org/2000/svg'
    height='24'
    viewBox='0 0 24 24'
    width='24'>
    <path d='M0 0h24v24H0V0z' fill='none' />
    <path
      d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z' />
  </svg>)
}

Upvotes: 0

Related Questions