Quotations Component

Another component will show the quotations of the currently selected author. It will have a similar structure to the Authors component:

export function Quotations() {
  return (
    <div id="quotations-panel" className="panel">
      <h2>Quotations from SOMEBODY</h2>
      <ul id="quotations-list">
        <li>{quotation1}</li>
        <li>{quotation2}</li>
        <li>{quotation3}</li>
        <li>...</li>
      </ul>
    </div>
  );
}

You define this first draft of the Quotations component in src/Quotations.js and add it to App:

function App() {
  return (
    <div className="App">
      <Authors />
      <Quotations />
    </div>
  );
}

As with Authors, you pull out the state that you need using the useSelector function. You need the name of the author who is currently selected and that author's quotations:

import {useSelector} from 'react-redux';

export function Quotations() {
  const selectedAuthor = useSelector(state => state.selectedAuthor);
  const selectedQuotations = useSelector(state => state.quotations[state.selectedAuthor]);

  // ...
}

What happens when no author is selected? The selectedAuthor will be null. Looking up the null author in the quotations object will yield undefined for selectedQuotations. Probably you don't want to render any content when there is no author. It is legal for a component to return null if it has no content:

export function Quotations() {
  // ...

  if (selectedAuthor) {
    // ...
  } else {
    return null;
  }
}

When you have an author, you map the quotations to an array of list items.

export function Quotations() {
  // ...

  if (selectedAuthor) {
    return (
      <div id="quotations-panel" className="panel">
        <h2>Quotations from {selectedAuthor}</h2>
        <ul id="quotations-list">
          {selectedQuotations.map(quotation => <li>{quotation}</li>)}
        </ul>
      </div>
    );
  } else {
    return null;
  }
}

Try setting selectedAuthor value in the initial state of the store to one of the authors. Do that author's quotations render?

When you view your browser's console, you see the same warning about missing keys. Ideally, each quotation would have a unique ID assigned to it. That's a lot of work. You could use the quotation itself as the key. That feels excessive. In very limited circumstances, you could use the array index itself as a key:

{selectedQuotations.map((quotation, i) => <li key={i}>{quotation}</li>)}

Using an array index as a key is only safe if the array never changes its order or structure. For example, suppose you have an array of four components and give them keys 0, 1, 2, and 3 based only on their indices. If you remove component 0 and re-render, your new array will have components with keys 0, 1, 2. React will mistakenly sense that the component with key 3 has been removed, when it was really the component with key 0 that was removed. In such a situation, your user interface will not reflect the true state of your app.

As a rule, you should not use array indices as keys unless they are stable. You promise to not add any features to Quotebase that will make the indices unstable.