title: Creating a relationship(OnetToMany) between 2 objects in reactjs
body: <p>I have a database created in MYSQL that has two tables(Patient,Caregiver) that are connected with OneToMany mapping in spring boot. I want to create a Patient Object in react Js in front end( but I would need to specify the caregiver at the moment of creation) and then send it to backend, my only issue is that i am not certain how to create the connection. </p>
  
  <p>I have tried to create a select option for the caregiver reference from patient in order to chose from the caregiver-list. But I am unable to do so having gotten the error:  ##
  TypeError: Unable to get property 'name' of undefined or null reference## </p>
  
  <p>My caregiver and patient entities in spring boot </p>
  
  <pre><code>@Entity
  @Table(name = "Patient", schema = "mydbps")
  public class Patient {
      @Id
      @GeneratedValue(strategy = GenerationType.IDENTITY)
      @Column(name = "idPatient", unique = true, nullable = false)
      private int idPatient;
  
      @Column(name = "patientName")
      private String patientName;
  
      @Column(name = "patientSurname")
      private String patientSurname;
  
      @Column(name = "patientGender")
      private String patientGender;
  
      @Column(name = "patientBirthdate")
      private Date patientBirthdate;
  
      @Column(name = "patientAddress")
      private String patientAddress;
  
      @Column(name = "patientEmail")
      private String patientEmail;
  
      @Column(name = "patientPassword")
      private String patientPassword;
  
      @ManyToOne
      @JoinColumn(name = "Caregiver_idCaregiver")
      Caregiver Caregiver_idCaregiver;
  }
  
  @Entity
  @Table(name="Caregiver",schema="mydbps")
  public class Caregiver {
  
      @Id
      @GeneratedValue(strategy = GenerationType.IDENTITY)
      @Column(name = "idCaregiver", unique=true, nullable = false)
      private int idCaregiver;
  
      @Column(name="caregiverName")
      private String caregiverName;
  
      @Column(name="caregiverSurname")
      private String caregiverSurname;
  
      @Column(name="caregiverGender")
      private String caregiverGender;
  
      @Column(name="caregiverAddress")
      private String caregiverAddress;
  
      @Column(name="caregiverBirthdate")
      private String caregiverBirthdate;
  
      @Column(name="caregiverEmail")
      private String caregiverEmail;
  
      @Column(name="caregiverPassword")
      private String caregiverPassword;
  
      @JsonIgnore
      @OneToMany(mappedBy = "Caregiver_idCaregiver", cascade = CascadeType.ALL,fetch= FetchType.LAZY)
      private Set&lt;Patient&gt; patientList;}
  
  </code></pre>
  
  <p>The contrellers:</p>
  
  <pre><code>@RestController
  @CrossOrigin
  @RequestMapping(value = "/caregivers")
  public class CaregiverController {
      @Autowired
      private CaregiverService docService;
  
      @PostMapping
      public ApiResponse&lt;Caregiver&gt; saveUser(@RequestBody CaregiverDTO user){
          return new ApiResponse&lt;&gt;(HttpStatus.OK.value(), "Caregiver saved successfully.",docService.insert(user));
      }
  
      @GetMapping
      public ApiResponse&lt;List&lt;Caregiver&gt;&gt; listUser(){
          return new ApiResponse&lt;&gt;(HttpStatus.OK.value(), "Caregivers list fetched successfully.",docService.findAll());
      }
  
      @GetMapping("/{id}")
      public ApiResponse&lt;Caregiver&gt; getOne(@PathVariable int id){
          return new ApiResponse&lt;&gt;(HttpStatus.OK.value(), "Caregiver fetched successfully.",docService.findCaregiverByIdCaregiver(id));
      }
  
      @PutMapping("/{id}")
      public ApiResponse&lt;CaregiverDTO&gt; update(@RequestBody CaregiverDTO userDto) {
          return new ApiResponse&lt;&gt;(HttpStatus.OK.value(), "Caregiver updated successfully.",docService.update(userDto));
      }
  
      @DeleteMapping("/{id}")
      public ApiResponse&lt;Void&gt; deleteUser(@PathVariable int id) {
          docService.deleteUser(docService.findCaregiverByIdCaregiver(id));
          return new ApiResponse&lt;&gt;(HttpStatus.OK.value(), "Caregiver deleted successfully.", null);
      }
  
  
  @RestController
  @CrossOrigin
  @RequestMapping(value = "/patients")
  public class PatientController {
  
  
      @Autowired
      private PatientService docService;
  
      @PostMapping
      public ApiResponse&lt;Patient&gt; saveUser(@RequestBody PatientDTO user){
          return new ApiResponse&lt;&gt;(HttpStatus.OK.value(), "User saved successfully.",docService.insert(user));
      }
  
      @GetMapping
      public ApiResponse&lt;List&lt;Patient&gt;&gt; listUser(){
          return new ApiResponse&lt;&gt;(HttpStatus.OK.value(), "User list fetched successfully.",docService.findAll());
      }
  
      @GetMapping("/{id}")
      public ApiResponse&lt;Patient&gt; getOne(@PathVariable int id){
          return new ApiResponse&lt;&gt;(HttpStatus.OK.value(), "User fetched successfully.",docService.findPatientByIdPatient(id));
      }
  
      @PutMapping("/{id}")
      public ApiResponse&lt;PatientDTO&gt; update(@RequestBody PatientDTO userDto) {
          return new ApiResponse&lt;&gt;(HttpStatus.OK.value(), "User updated successfully.",docService.update(userDto));
      }
  
      @DeleteMapping("/{id}")
      public ApiResponse&lt;Void&gt; deleteUser(@PathVariable int id) {
          docService.deleteUser(docService.findPatientByIdPatient(id));
          return new ApiResponse&lt;&gt;(HttpStatus.OK.value(), "User deleted successfully.", null);
      }
  
  
  
  
  }
  
  </code></pre>
  
  <p>The react js add-patient component</p>
  
  <pre><code>import React, { Component } from 'react'
  import PatientApiService from "../../service/PatientApiService";
  import CaregiverApiService from "../../service/CaregiverApiService";
  import Select from 'react-select';
  
  class AddPatientComponent extends Component{
  
      constructor(props){
          super(props);
          this.state ={
              patientName: '',
              patientSurname: '',
              patientEmail: '',
              patientPassword: '',
              patientGender: '',
              patientAddress: '',
              Caregiver_idCaregiver: '',
              caregivers: [],
              message: null
          }
          this.saveUser = this.saveUser.bind(this);
      }
  
    componentDidMount() {
          this.reloadCaregiverList();
  
      }
    reloadCaregiverList() {
              PatientApiService.fetchCaregivers()
                  .then((res) =&gt; {
                      this.setState({caregivers: res.data.result})
                  });
          }
  
      saveUser = (e) =&gt; {
          e.preventDefault();
          let user = {patientName: this.state.patientName, patientSurname: this.state.patientSurname, patientEmail: this.state.patientEmail, patientPassword: this.state.patientPassword, patientGender: this.state.patientGender, patientAddress: this.state.patientAddress,Caregiver_idCaregiver :this.state.Caregiver_idCaregiver};
          PatientApiService.addUser(user)
              .then(res =&gt; {
                  this.setState({message : 'Patient added successfully.'});
                  this.props.history.push('/patients');
              });
      }
  
      onChange = (e) =&gt;
          this.setState({ [e.target.name]: e.target.value });
  
      render() {
          return(
              &lt;div&gt;
              &lt;div&gt;
                  &lt;h2 className="text-center"&gt;Add User&lt;/h2&gt;
                  &lt;form&gt;
                  &lt;div className="form-group"&gt;
                      &lt;label&gt;Name:&lt;/label&gt;
                      &lt;input type="text" placeholder="patientName" name="patientName" className="form-control" value={this.state.patientName} onChange={this.onChange}/&gt;
                  &lt;/div&gt;
  
                  &lt;div className="form-group"&gt;
                      &lt;label&gt;Surname:&lt;/label&gt;
                      &lt;input type="patientSurname" placeholder="patientSurname" name="patientSurname" className="form-control" value={this.state.patientSurname} onChange={this.onChange}/&gt;
                  &lt;/div&gt;
  
                  &lt;div className="form-group"&gt;
                      &lt;label&gt;Email:&lt;/label&gt;
                      &lt;input placeholder="Email" name="patientEmail" className="form-control" value={this.state.patientEmail} onChange={this.onChange}/&gt;
                  &lt;/div&gt;
  
                  &lt;div className="form-group"&gt;
                      &lt;label&gt;Password:&lt;/label&gt;
                      &lt;input placeholder="Password" name="patientPassword" className="form-control" value={this.state.patientPassword} onChange={this.onChange}/&gt;
                  &lt;/div&gt;
  
                  &lt;div className="form-group"&gt;
                      &lt;label&gt;Gender:&lt;/label&gt;
                      &lt;input placeholder="Gender" name="patientGender" className="form-control" value={this.state.patientGender} onChange={this.onChange}/&gt;
                  &lt;/div&gt;
  
                  &lt;div className="form-group"&gt;
                      &lt;label&gt;Address:&lt;/label&gt;
                      &lt;input placeholder="Address" name="patientAddress" className="form-control" value={this.state.patientAddress} onChange={this.onChange}/&gt;
                  &lt;/div&gt;
  
               &lt;div className="form-group"&gt;
                   &lt;div className="row"&gt;
                     &lt;div className="col-md-4"&gt;&lt;/div&gt;
                     &lt;div className="col-md-4"&gt;
                     &lt;label&gt;Caregiver:&lt;/label&gt;
                      &lt;Select options={ this.state.caregivers } name="Caregiver_idCaregiver"  value={this.state.Caregiver_idCaregiver} onChange={(e)=&gt;this.setState({ Caregiver_idCaregiver:e.value})} /&gt;
  
                     &lt;/div&gt;
                     &lt;div className="col-md-4"&gt;&lt;/div&gt;
                   &lt;/div&gt;
                 &lt;/div&gt;
  
                  &lt;button className="btn btn-success" onClick={this.saveUser}&gt;Save&lt;/button&gt;
              &lt;/form&gt;
      &lt;/div&gt;
       &lt;div&gt;
                                  &lt;h2 className="text-center"&gt;Caregiver Details&lt;/h2&gt;
                                  &lt;table className="table table-striped"&gt;
                                      &lt;thead&gt;
                                          &lt;tr&gt;
                                              &lt;th className="hidden"&gt;Id&lt;/th&gt;
                                              &lt;th&gt;FirstName&lt;/th&gt;
                                              &lt;th&gt;LastName&lt;/th&gt;
                                              &lt;th&gt;caregiverEmail&lt;/th&gt;
                                              &lt;th&gt;caregiverGender&lt;/th&gt;
                                              &lt;th&gt;caregiverAddress&lt;/th&gt;
                                          &lt;/tr&gt;
                                      &lt;/thead&gt;
                                      &lt;tbody&gt;
                                          {
                                              this.state.caregivers.map(
                                          caregiver =&gt;
                                                      &lt;tr key={caregiver.idCaregiver}&gt;
                                                          &lt;td&gt;{caregiver.caregiverName}&lt;/td&gt;
                                                          &lt;td&gt;{caregiver.caregiverSurname}&lt;/td&gt;
                                                          &lt;td&gt;{caregiver.caregiverEmail}&lt;/td&gt;
                                                          &lt;td&gt;{caregiver.caregiverGender}&lt;/td&gt;
                                                          &lt;td&gt;{caregiver.caregiverAddress}&lt;/td&gt;
                                                      &lt;/tr&gt;
                                              )
                                          }
                                      &lt;/tbody&gt;
                                  &lt;/table&gt;
  
                              &lt;/div&gt;
                              &lt;/div&gt;
          );
      }
  }
  
  export default AddPatientComponent;
  
  </code></pre>
  
  <p>ApiPatient service:</p>
  
  <pre><code>import axios from 'axios';
  
  const USER_API_BASE_URL = 'http://localhost:8080/patients';
  const CAREGIVER_API_BASE_URL='http://localhost:8080/caregivers';
  class PatientApiService {
  
      fetchUsers() {
          return axios.get(USER_API_BASE_URL);
      }
  
      fetchUserById(userId) {
          return axios.get(USER_API_BASE_URL + '/' + userId);
      }
  
      deleteUser(userId) {
          return axios.delete(USER_API_BASE_URL + '/' + userId);
      }
  
      addUser(user) {
          return axios.post(""+USER_API_BASE_URL, user);
      }
  
      editUser(user) {
          return axios.put(USER_API_BASE_URL + '/' + user.id, user);
      }
      fetchCaregivers()
      {return axios.get(CAREGIVER_API_BASE_URL);}
  
  }
  
  export default new PatientApiService();
  </code></pre>
  
  <p>My postman get service response for the fetchCaregivers is :</p>
  
  <pre><code>
      "status": 200,
      "message": "Caregivers list fetched successfully.",
      "result": [
          {
              "idCaregiver": 1,
              "caregiverName": "Marius",
              "caregiverSurname": "Ioan",
              "caregiverGender": null,
              "caregiverAddress": null,
              "caregiverBirthdate": null,
              "patientList": []
          }
      ]
  }
  </code></pre>
  
  <p>But it won't appear in the dropdown. </p>
  
  <p>I wish to select the caregiver from a dropdown list but I does not apppear, also the error  which appears at runtime is : </p>
  
  <pre><code>×
  TypeError: Unable to get property 'name' of undefined or null reference
  onChange
  D:/AN 4/react-js-example-master/src/component/patient/AddPatientComponent.jsx:46
    43 | }
    44 | 
    45 | onChange = (e) =&gt;
  &gt; 46 |     this.setState({ [e.target.name]: e.target.value });
       | ^
    47 | 
    48 | render() {
    49 |     return(
  </code></pre>
  
  <p>Thank you!</p>