const trailersArray = ['Trailer A', 'Trailer B', 'Trailer C'];

function mockAPI() {
  return new Promise((resolve,reject)=>{
    setTimeout(()=>resolve(trailersArray),1000);
  });
}


function App() {

  const [loading, setLoading] = React.useState(true);
  const [trailers, setTrailers] = React.useState([]);
  const [selectedTrailer, setSelectedTrailer] = React.useState(null);
  
  React.useEffect(()=>{
    mockAPI()
    .then((data)=>{
      setTrailers(data);
      setSelectedTrailer('Trailer A');
      setLoading(false);
    });
  },[]);
  
  const trailerItems = trailers.length ?
    trailers.map((item) => 
      <div
        onClick={()=>setSelectedTrailer(item)}
        className={item === selectedTrailer ? 'item selected' : 'item'}
      >
        {item}
      </div>
    ) 
  : null;

  return(
    <div className="list">
      {loading ? 
        <div>Loading...</div>
        : <React.Fragment>
            <div>Click to select</div>
            {trailerItems}
          </React.Fragment>
      }
    </div>
  );
}

ReactDOM.render(<App/>, document.getElementById('root'));

.list {
  width: 150px;
}

.item {
  cursor: pointer;
}

.selected {
  background-color: lightblue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"/>

const trailersArray = ['Trailer A', 'Trailer B', 'Trailer C'];

function mockAPI() {
  return new Promise((resolve,reject)=>{
    setTimeout(()=>resolve(trailersArray),1000);
  });
}

class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      loading: true,
      trailers: [],
      selectedTrailer: null
    };
  }
  
  componentDidMount() {
    mockAPI()
    .then((data) => {
      this.setState({
        trailers: data,
        selectedTrailer: data[0],
        loading: false
      });
    });
  }
  
  render() {
  
    const trailerItems = this.state.trailers.length ?
      this.state.trailers.map((item) => 
        <div
          onClick={()=>this.setState({selectedTrailer: item})}
          className={item === this.state.selectedTrailer ? 'item selected' : 'item'}
        >
          {item}
        </div>
      ) 
    : null;
    
    return(
      <div className="list">
        {this.state.loading ? 
          <div>Loading...</div>
          : <React.Fragment>
              <div>Click to select</div>
              {trailerItems}
            </React.Fragment>
        }
      </div>
    );
  
  }
}

ReactDOM.render(<App/>, document.getElementById('root'));

.list {
  width: 150px;
}

.item {
  cursor: pointer;
}

.selected {
  background-color: lightblue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"/>