CODEWITHSUNDEEP
javascriptreactjs
Alex Foxleigh
Alex Foxleigh

Reputation: 1964

React key on grouped list

I'm getting the error that I need to have a unique key prop for each child in a list. However I'm adding li elements to a ul in groups based on the dates supplied. So I don't have a parent element to attach a key prop to. As you can see from the code below I've attempted to add it to each li element inside the fragment but it's not good enough for react apparently.

Any suggestions?

export const DeskBookCard: React.FC<Props> = ({ desk, dates, bookAction }: Props) =>{

return <section className={styles['desk-book-card']}>
  <h2>{desk.name}</h2>
  <form onSubmit={() => bookAction()}>
  <ul className={styles['checkbox-list']}>
    {
      dates.map(date => {
        const DATE_FORMAT = 'EEEE, do LLLL'
        return <>
          <li key={`${format(date, 'T')}-am`}>
            <label>
              <input type="checkbox" name={`${format(date, 'T')}-am`} id={`${date}-am`}/>
              {format(date, DATE_FORMAT)} - AM
            </label>
          </li>
          <li key={`${format(date, 'T')}-pm`}>
            <label>
              <input type="checkbox" name={`${format(date, 'T')}-pm`} id={`${date}-pm`}/>
              {format(date, DATE_FORMAT)} - PM
            </label>
          </li>
        </>
      })
    }
    
  </ul>
  <button type="submit">Book a desk</button>
  <button>cancel</button>
  </form>
</section>

Upvotes: 0

Views: 54

Answers (1)

Alex Foxleigh
Alex Foxleigh

Reputation: 1964

I switched to using the longform React.Fragment instead of the <> shorthand and I was able to apply a key prop to that:

e.g. <React.Fragment key={format(date, 'T')}>

Upvotes: 2

Related Questions