React is not rendering this.state object

Question

I am new to React and also to stackoverflow,

I am trying to render this.state.searchResults as attached code

The code runs without any error, but does not render. what wrong am I doing here ?

I am exporting this component in my main js file. if I run without map method, it renders correctly.

please help

    export class App extends React.Component {

      constructor(props) {
        super(props);
        this.state = { 
            searchResults:  [
              {name: 'name1', artist: 'artist1', album: 'album1', id: 1},
              {name:' name2', artist: 'artist2', album: 'album2', id: 2},
              {name: 'name3', artist: 'artist3', album: 'album3', id: 3}
            ] 
          }
        }

      render() {
        return (
        <div>  
          <h1>Ja<span class="highlight">mmm</span>ing </h1>      
          <div className="App">       
            { this.state.searchResults.map( track => {
                return track
              })
            } 
          </div>
        </div>
        
      );
    }
    }

Please don't post your code as an image. Instead, post it just as text. — MC Emperor, Apr 15 '22 at 15:48
*"The code runs without any error"* - I would fully expect this to produce an error. Are you sure you're checking the browser console for errors? Because an object by itself is not valid as a renderable element in React. Even if it did render, it wouldn't know *how* to render an object other than as something like `[object Object]`. — David, Apr 15 '22 at 15:51
@David, you are correct. Browser console is throwing this error "Uncaught Error: Objects are not valid as a React child........." — pAtel0158, Apr 15 '22 at 16:05
@pAtel0158: It's because `track` by itself in that context is an object, and React doesn't know how you want to render it. You can render individual values from the object, or pass the object to a component which internally renders individual values from the object. But an object by itself is not renderable. — David, Apr 15 '22 at 16:27

score 0 · Accepted Answer · answered Apr 15 '22 at 15:54

0

You can render object directly in JSX. Specify the object value

this.state.searchResults.map((track) => (
<p>{track.name} {track.artist} {track.album} </p>
))

answered Apr 15 '22 at 15:54

Khant

958
5
20

this works, thanks Khant for replying. – pAtel0158 Apr 15 '22 at 17:29
@pAtel0158 You should select this answer as answered and close the question. NOT delete – Khant Apr 15 '22 at 17:44

React is not rendering this.state object

1 Answers1