How to pass as a props an array of String and JSX with NextJs?

i passed as a props an array of strings an JSX but there is an error message “Missing “key” prop for element in arrayeslintreact/jsx-key “

<Sec1Header
    
      MainText={[
        "Your ",
        <span className='text-red-400'>
          Trusted
        </span>,
        " Development Partner",
      ]}
  
    />

I’m doing all of that to just try to color the text “Trusted” with different colors and not change the div dynamic

Answer

You’re passing your props in correctly, it’s the react/jsx-key ESLint rule that’s generating that message. You just need to add a key prop to that <span> tag:

<Sec1Header
  MainText={[
    "Your ",
    <span key="coloredText" className="text-red-400">
      Trusted
    </span>,
    " Development Partner",
  ]}
/>

Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity…

https://reactjs.org/docs/lists-and-keys.html#keys

But as one comment suggested, I would also convert that colored text into its own separate child component.