title: display all data with only a single object from array of objects
body: <p>I am new to java and react. I get this data from backend.</p>
  <pre><code>   {
      &quot;id&quot;: 1,
      &quot;uName&quot;: &quot;Example GmbH&quot;,
      &quot;uAdresse&quot;: {
          &quot;id&quot;: 2,
          &quot;str&quot;: &quot;Dieselstr&quot;,
          &quot;strNum&quot;: &quot;160&quot;,
          &quot;plz&quot;: 48147,
          &quot;ort&quot;: &quot;Münster&quot;
      },
      &quot;eMail&quot;: &quot;info@example.de&quot;,
      &quot;telNummer&quot;: &quot;0000000000&quot;,
      &quot;uDescription&quot;: &quot;Lorem ipsum dolor sit amet, consectetur adipisici elit...&quot;,
      &quot;uAngebot&quot;: [
          {
              &quot;id&quot;: 3,
              &quot;sTitle&quot;: &quot;Lorem ipsum&quot;,
              &quot;sText&quot;: &quot;Lorem ipsum dolor sit amet, consectetur adipisici elit...&quot;
          },
          {
              &quot;id&quot;: 4,
              &quot;sTitle&quot;: &quot;Lorem ipsum&quot;,
              &quot;sText&quot;: &quot;Lorem ipsum dolor sit amet, consectetur adipisici elit...&quot;
          },
          {
              &quot;id&quot;: 5,
              &quot;sTitle&quot;: &quot;Lorem ipsum&quot;,
              &quot;sText&quot;: &quot;Lorem ipsum dolor sit amet, consectetur adipisici elit...&quot;
          }
          {
              ....
          }
      ]
  }
  </code></pre>
  <p>I can fetch and map over the data and display the result (http://localhost:8080/unternehmen/1). All is fine.</p>
  <p>Now i want display data, but only with a single object from &quot;uAngebot&quot;. The routing is than e.g. http://localhost:8080/unternehmen/1/uAngebot/3.
  Any help is highly appreciated.</p>
  <p>edit:</p>
  <pre><code>//unternehmenTest.jsx
  import React, { Component } from 'react';
  
  const API = 'http://localhost:8080/';
  const DEFAULT_QUERY = 'unternehmen/';
  
  class UnternehmenTest extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
              id: props.id,
              unternehmen: [],
              isLoading: false,
          };
      }
  
      componentDidMount() {
          this.setState({ isLoading: true });
          fetch(API + DEFAULT_QUERY + this.state.id)
              .then(response =&gt; response.json())
              .then(data =&gt; this.setState({ unternehmen: data, isLoading: false }));
      }
  
      render() {
          var unternehmen = this.state.unternehmen;
          console.log(unternehmen) // whole object is in console
  
          var requiredAngebot = unternehmen['uAngebot'].find(element =&gt; element['id'] === 3);
          console.log('requiredAngebot', requiredAngebot);
  
          return (
              &lt;div&gt;hello&lt;/div&gt;
          );
  
      }
  }
  export default UnternehmenTest;
  </code></pre>
  <p>I get this error:
  <em>TypeError: undefined is not an object (evaluating 'unternehmen['uAngebot'].find')</em></p>
  <p>What is wrong?</p>