TypeError: eleves.map is not a function React/Spring-boot cannot display @ManyToOne relation

Question

I have 2 entities with a Many to One relationship that I want to display. However, when I save the data in the student entity while leaving the level entity at null I manage to display it without problem because the response is an object.

But when I associate a student with a level the answer then becomes an array [] and I cannot display with the map function since map cannot iterate over an array. Please if anyone has any idea to help me.

× TypeError: eleves.map is not a function

I put the capture of my code side front and back

Entity Eleve

@Entity

@Data @NoArgsConstructor @AllArgsConstructor @ToString public class Eleve implements Serializable{

@Id @GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
//@NotBlank(message = "Ce champs est requis")
@Column(unique = true)
private String matriculeEleve;

@NotBlank(message = "Ce champs est requis")
private String nom;

@NotBlank(message = "Ce champs est requis")
private String prenom;

@NotBlank(message = "Ce champs est requis")
private String adresse;

@NotBlank(message = "Ce champs est requis")
private String contactPrimaire;

private String contactSecondaire;
@NotBlank(message = "Ce champs est requis")

private String nomParents;


@Enumerated(EnumType.STRING)
private Gender gender;

@JsonFormat(shape=Shape.STRING, pattern="yyyy-MM-dd")
@Temporal(TemporalType.DATE)
private Date dateNaissance;

@Column(name = "date_inscription")
@JsonFormat(shape=Shape.STRING, pattern="yyyy-MM-dd")
@Temporal(TemporalType.DATE)
private Date createdAt = new Date(System.currentTimeMillis());

private String statut;

private String photo;

@ManyToOne(fetch = FetchType.LAZY)
private Groupe groupe;

@ManyToOne(fetch = FetchType.LAZY)
private Niveau niveau;

public enum Gender { Masculin, Feminin }

Entite Niveau

 @Entity

@Data @NoArgsConstructor @AllArgsConstructor public class Niveau implements Serializable{

@Id @GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;

@NotBlank(message = "Ce champ est requis")
private String code_classe;

private String libelle;

@OneToMany(mappedBy = "niveau")
private Collection<Eleve> eleves;

}

FrontEnd React

Action code

export const allEleves = () => async dispatch => {
  const res = await axios.get("http://localhost:8080/api/eleve/all");
    dispatch({
      type: GET_ELEVES,
      payload: res.data
    });
}

Eleve Component

componentDidMount(){
    this.props.allEleves()
}

render() {
    const {eleves } = this.props.eleves

    const listEleveComponent1 = eleves.length < 1 ? (<Info className="alert alert-info text-center" role="alert">Aucun eleve inscrit</Info>) : 
                               eleves.map(eleve => (<ElevesItems key = {eleve.id} eleve={eleve} />
    ))

    return (
        <div className="table-responsive">
             <table className="table table-striped table-bordered first">
                <thead>
                    <tr>
                      <th></th>
                      <th>Matricule</th>
                      <th>Nom</th>
                      <th>Prenom</th>
                      <th>Genre</th>
                      <th>Date de naissance</th>
                      <th>Nom parents</th>
                      <th>Contact 1</th>
                      <th>Contact 2</th>
                      <th>Adresse</th>
                      <th>Niveau</th>
                      <th>Actions</th>
                    </tr>
                 </thead>

                   {listEleveComponent}
                
             </table>
        </div>

ElevesItems

  <tbody>
   <tr>
       <td> <img src="" alt="" height="50%"/></td>
          <td>{this.props.eleve.matriculeEleve}</td>
          <td>{this.props.eleve.nom}</td>
          <td>{this.props.eleve.prenom}</td>
          <td>{this.props.eleve.gender}</td>
          <td>{this.props.eleve.dateNaissance}</td>
          <td>{this.props.eleve.nomParents}</td>
          <td>{this.props.eleve.contactPrimaire}</td>
          <td>{this.props.eleve.contactSecondaire}</td>
          <td>{this.props.eleve.adresse}</td>
          <td>{this.props.eleve.createdAt}</td>
          <td >{this.props.eleve.niveau}</td>

          <td>
            <Link to={`/eleve-detail/${this.props.eleve.id}`} className="btn btn-light"><i class="fas fa-eye"></i></Link>
           
            <button className="btn btn-danger" onClick={this.onDelete.bind(this, this.props.eleve.id)}><i class="fas fa-trash-alt"/></button>
          </td> 
   </tr>
    
</tbody>

satyen satyen · Accepted Answer · 2021-04-20T11:25:51

            //I see a problem with de structured array at 
    ````const {eleves } = this.props.eleves````
            
            // to solve this u can either convert it into an object for an example
````
            let p2 = ["Annie", "Becky"]
            const p3 = {friend: p2}
            let {friend} = p3;
            
            friend.map(e=> e+1).forEach(k=> console.log(k))
````
         // you can check if this.props.eleves this returns an array then create a new //object and add it to that

TypeError: eleves.map is not a function React/Spring-boot cannot display @ManyToOne relation

1 Answers