Access Objects within a JSON Array in a React Component

Question

I've got some JSON that I'm trying to access in React and grab specific pieces of data from, but I only want to pull from the first element in the array (the most recent financial data). I've got the props on the component, but can't figure out how to get what I need. For instance if I want to access the debtRatios. I tried using map as I've done with the stock component, but it comes back as undefined. Ideally i'd like to have the data from ratio[0] as the props on the ratioInfo component.

<div className="stock-container">
    <div className="stock">
        {props.stock.map(stock => (
            <UserStock key={stock.symbol} stock={stock}/>
        ))}
    </div>
    <div className="ratioInfo">
        <UserStockRatios ratios={props.ratios}/>
    </div>
</div>

Answer 1

Try this

<div className="ratioInfo">
  {props.ratios.length > 0 && <UserStockRatios ratios={props.ratios[0]}/>}
</div>

Alternatively if you use babel in your project, this one might work as well:

<div className="ratioInfo">
  <UserStockRatios ratios={props.ratios?.[0]}/>
</div>

More infos about Optional Chaining here.