React unique key prop on h4

Question

I cant figure out why my code is returning this error: "Warning: Each child in a list should have a unique "key" prop."

My code:

const TextBlock = ({title, text}) => {
    return (
        <div className="text-block pt-160">
            <h4 className="subtitle">
                {title}
            </h4>
            <h3 className="pt-20">
                {text}
            </h3>
        </div>
    );
}

I tried to insert some ids using lodash _.unique id function nothing changed. After removing h4 tag error is gone.

Can someone explain why this happens and how to solve this?

EDIT I'm calling it like this:

<TextBlock 
    title={['Our ', <span>works</span>]}
    text={'...'}/>

Thanks in advance!

Answer 1

title={['Our ', <span>works</span>]}

Since this is an array, then when you try to render <h4 /**/>{title}</h4>, you are putting an array as a child of an h4. Elements in arrays need to have keys, but that span doesn't have one, so you get that error.

I would recommend changing your title prop to be a fragment instead of an array:

title={(
  <React.Fragment>
    Our <span>works</span>
  </React.Fragment>
)}

Or using the fragment shorthand:

title={<>Our <span>works</span></>}