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

Question

I am getting this error in my react frontend. It seems like I am not allowed to create object in the child elements but not sure. As I used it almost every time. I have tried few different iterations where I am looping through the state object using map method but does not seems working. I am making some silly mistake but not able to figure out where I've gone wrong.

Error: Objects are not valid as a React child (found: object with keys {weight}). If you meant to render a collection of children, use an array instead.
in span (at App.js:90)
in div (at App.js:74)
in div (at App.js:70)
in App (at src/index.js:6)

app.js

export default class App extends Component {
  state = {
    todos: []
  }

  componentDidMount() {
    // Fetch all todos
    api.readAll().then((todos) => {
      console.log('all todos', todos.data.allweight)
      const weight = todos.data.allweight.data.map(w => w)
      this.setState({
        todos: weight
      })
    })
  }

  addWeight = (e) => {
    e.preventDefault()
    const { todos } = this.state
    const todoValue = this.inputElement.value

    if (!todoValue) {
      alert('Please add Weight Value')
      this.inputElement.focus()
      return false
    }

    // reset input to empty
    this.inputElement.value = ''

    const todoInfo = {
      title: todoValue
    }
    // Optimistically add todo to UI
    const newTodoArray = [{
      data: todoInfo
    }]

    const optimisticTodoState = newTodoArray.concat(todos)

    this.setState({
      todos: optimisticTodoState
    })
    // Make API request to create new todo
    api.create(todoInfo).then((response) => {
      console.log(response)
      // remove temporaryValue from state and persist API response
      //const persistedState = optimisticTodoState.concat(response)
      // Set persisted value to state
      this.setState({
        todos: optimisticTodoState
      })
    }).catch((e) => {
      console.log('An API error occurred', e)
      const revertedState = removeOptimisticTodo(todos)
      // Reset to original state
      this.setState({
        todos: revertedState
      })
    })
  }

  render() {
    return (
      <div className='app'>

        <AppHeader/>

        <div className='todo-list'>
          <h2>
            Daily Weight Tracker
          </h2>
          <form onSubmit={this.addWeight} name="addWeight">
            <input className='todo-create-input' placeholder='Add Weight' type="text" name="weight" id="weight"
                   ref={el => this.inputElement = el} style={{ marginRight: 20 }}/>

            <button type="submit">Add Weight</button>

          </form>
          <h3>You're Weight</h3>
          {this.state.todos.map((t, index) => <span key={index}>{t}</span>)}
          <LineChart
            width={400}
            height={400}
            data={this.state.todos}
            margin={{ top: 5, right: 20, left: 10, bottom: 5 }}
          >
            <XAxis dataKey="name"/>
            <Tooltip/>
            <CartesianGrid stroke="#f5f5f5"/>
            <Line type="monotone" dataKey="uv" stroke="#ff7300" yAxisId={0}/>
            <Line type="monotone" dataKey="pv" stroke="#387908" yAxisId={1}/>
          </LineChart>
        </div>
      </div>
    )
  }
}

Answer 1

The problem is at

{this.state.todos.map((t, index) => <span key={index}>{t}</span>)}

Where {t} is a plain object, which React can't render. You'll have to do something like {t.title} or {JSON.stringify(t)}