如何通过道具使地图功能内的子值可编辑

Question

Is there any way to make the mapping child values input editable via props? I have this simple accordion in my Next.js App which I'd like to reuse with different inputs and what I am naming listItemTitle can vary from input to input. This can either be something like item.question[0].questionTitle or item.partner[0].partnerLastName .

How do I make this as scalable as possible?

Eg

// Child Component

const SimpleAccordion = ({ listItems, listItemTitle }) => {
  return (
    <section>
      {
        listItems && listItems.map((item, index) => (
          <li key={ index }>
            { listItemTitle } // Make this editable via props
          </li>
        ))
      }
    </section>
  )
}

// Parent Component
...
<SimpleAccordion
  listItems={ pageData.questionSelector }
  listItemTitle={ question[0].questionTitle }
/>
...

Answer 1

If I understand right you want to make SimpleAccordion generic, in that case you can pass the component to use to that function.

// Parent Component
...
import QuestionListItem from './QuestionListItem'
...
<SimpleAccordion
  listItems={ pageData.questionSelector }
  listItemComponent={QuestionListItem}/>
...
or     
...
import PartnerListItem from './PartnerListItem'
...    
<SimpleAccordion
  listItems={ pageData.questionSelector} 
  listItemComponent={PartnerListItem}/>

This will be the generic SimpleAccordion :

// Generic component
const SimpleAccordion = ({ listItems, listItemComponent }) => {
  let Component = listItemComponent
  return (
    <section>
      {
        listItems && listItems.map((item, index) => (
          <li key={ index }>
            <Component item={item}/>
          </li>
        ))
      }
    </section>
  )
}

You can declare as many list items as you want, for example:

const QuestionListItem = ({item}) => {
  return (
    <span>{item.question[0].questionTitle}</span>
  )
}

const PartnerListItem = ({item}) => {
  return (
    <span>{item.partner[0].partnerLastName}</span>
  )
}