Как я могу уменьшить жестко закодированную часть в React Component?

Question

Вот жестко закодированная часть:

const filtersInfo = [
        {
            resetValue: props.setClass,
            valueInfo: classValue && <p>Class: {classes.find(c => c.slug === classValue).name} x</p>
        },
        {
            resetValue: props.resetManaCost,
            valueInfo: manaCostBar && <p>Mana : {manaCostBar} x</p>
        },
        {
            resetValue: props.setTextFilter,
            valueInfo: textFilter && <p>{textFilter} x</p>
        },
//10 more items
]

Затем я просто перебираю ее:

const filterItems = filtersInfo.map((f, i) => <SimpleInfo key={i} resetValue={f.resetValue} valueInfo={f.valueInfo} />)

Как я могу уменьшить это жесткое кодирование? Я полагаю, я должен положить его в мой магазин Redux, но каждая часть зависит от разных редукторов, и это будет бесполезно.