react js array.map issue

Question

class TicketDetails extends React.Component{
constructor(props){
    super(props)
    this.state ={
        datatra : '',
        display:false,
        action_id:'',
        conversation:[]
       }
}

componentWillMount(){
    this.props.fetchHeader();
    this.props.fetchEmail();
    this.getMessage();
}

getMessage = () =>{
    console.log(this.props.content);
}


componentDidMount () {



 }




onButtonPress = () => {
    console.log(this.state.data);
    this.props.pushUpdateFlag(this.state.data);
}



render(){

    const trailMessage = this.props.content.map((list,index)=>(
        <ul className="listview" key={index}>
             <li>
              <div className="item">{}{list.to}</div>
              <div className="item">{list.sender}</div>
              <div className="item">{list.subject}</div>
              <div className="sub-item">{list.email_body[1]}</div>
              <div className="sub-item">{list.email_data}</div>
              <div className="sub-item">{list.unseen}</div>
            </li>
        </ul>));

    const ticketData = this.props.header.map((list,index)=>(
        <nav key={index} className="ticket-detail-status">
         <div className="ticket-detail-status-1">
         <ul>
             <li>Ticket/# <span><strong>{list.number}</strong></span></li>
             <li>
             <select className="ticket-status-dropdown" onChange={this.onSelectChange}>
                 <option value="Open">Open</option>
                 <option value="Acknowledged">Acknowledged</option>
                 <option value="In Progress - Customer Response Recieved">In Progress - Customer Response Recieved</option>
                 <option value="In Progress - Customer response Awaited">In Progress - Customer response Awaited</option>
                 <option value="Closed">Closed</option>
                 <option value="Cancelled">Cancelled</option>
                 <option value="Complete">Complete</option>
            </select>
            <Link to="/select"><Button  onClick={this.onButtonPress} className={"ticket-detail-btn"} content={"UPDATE"}/></Link>
             </li>
         </ul>
         </div>
         <div className="ticket-detail-status-2">
           <ul className="ticket-details-info">
              <li>current state : <span>open</span></li>
              <li>Open Date : <span>{list.creation_date}</span></li>
              <li>Agent name : <span>{list.agent}</span></li>
           </ul>
           <ul className="ticket-details-info">
            <li>Total conversation : <span>6</span></li>
            <li>Closed Date : <span>10/12/18</span></li>
            <li>SLA : <span>80%</span></li>
           </ul>
         </div>
         </nav>
    ));

      if(this.props.content.length === 0){
        return(<Loader/>)
    }else{
        return(
            <div className="ticket-details">
            {ticketData}
            <div className="conversation-view-selector">
              <div className="conversation-view-filter">
              <ul>
                  <li>view</li>
                  <li>
                      <select className="select-view">
                          <option value="conversation">conversation</option>
                          <option value="state">state</option>
                          <option value="sla">sla</option>
                      </select>
                  </li>
                  <li>sort</li>
                  <li>
                      <select className="select-view">
                          <option value="conversation">select</option>
                          <option value="state">ascending</option>
                          <option value="sla">descending</option>
                      </select>
                  </li>
              </ul>
              </div>
              <div className="conversation-list-populater">
              <div className="conversation-list-populater-open">
              <span className="conversation-list-populater-flags">open</span>
              </div>
               {trailMessage}
                <div className="conversation-list-populater-close">
                <span className="conversation-list-populater-flags">close</span>
                </div>
              </div>
           </div>
           <div className="conversation-view">
           <section className="conversation-view-display">
                  <div className="conversation-view-display-compose">
                      <div className="conversation-view-display-compose-closure">
                          <span><i className="fa fa-times"></i></span>
                      </div>
                      <div className="conversation-view-display-message-form">
                          <form className="conversation-view-display-message-form">
                              <ul>
                                  <li><input type="mail" placeholder="From" name='email'/></li>
                                  <li><input type="mail" placeholder="Date" name='CC'/></li>
                                  <li><input type="mail" placeholder="T0" name='BCC' /></li>
                                  <li><input type="text" placeholder="CC" name='Subject'/></li>
                              </ul>
                              <div className="attachements-counter-placeholder">
                                  Attchements
                              </div>
                              <div className="conversation-view-display-mail-text-area">
                                  {/* <textarea placeholder="Please Pen Here"></textarea> */}
                              </div>
                              <ul className="conversation-view-display-files-men">
                                  <li><i className="fa fa-paperclip"></i></li>
                                  <li><i className="fa fa-link"></i></li>
                              </ul>
                          </form>
                      </div>
                  </div>
              </section>
           </div>
          </div>
)

Error

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

I am not able to understand this error, as I have used this method of mapping multiple arrays in form of HTML earlier. If possible, could anyone please tell me the issue?

Answer 1

Your code looks correct and as you mentioned in the comments the error in email_body line.

You can fix the problem by making sure email_body is an array and have elements inside of it

You can change

  <div className="sub-item">{list.email_body[1]}</div>

To

  <div className="sub-item">{list.email_body.length >= 1 && list.email_body[1]}</div>

It will fix the problem