Passing extra props to component wrapped in FieldArray (React)

Question

I have a redux form inside which, amongst other things, I have a FieldArray. I am passing an array as name and pointing to a component, defined outside the body of the class, as component. Very simplified:

...
return(
   <>
      <FieldArray name={myArray} component={emails}/>
   </>
)
...

this is emails

const emails = ({ fields }) => (
    <>
        <Table>
            <Table.Body>
                {fields.map((code, index) => (
                    <Table.Row>
                        <Table.Cell>
                            <Field
                                name={code}
                                type="text"
                                component={customInput}
                                autoFocus
                            />
                        </Table.Cell>
                        <Table.Cell>
                            <Button content='XXXXX'/>
                        </Table.Cell>

                    </Table.Row>
                ))}
            </Table.Body>
          </Table>
        <Button content='XXXXX' />
    </>
);

What I would like to be able to do is to pass a dictionary to 'emails' in order to populate the 'content' field of the buttons (where XXXXX is now), as they come from a translation file.

Now, looking at the documentation, I can see they mention a 'props' parameter. I tried something on the line:

<FieldArray name={myArray} component={emails} props={myDictionary}/>

But I do not seem able to actually pass anything to FieldArray (or at least to retrieve it on the other side). I have seen a few existing questions, but the focus seem a bit different.

Does anyone have experience with it or any suggestion? Thanks :)

Answer 1

When you create functional component with react your component accepts props as an argument.

For example this piece of code is:

const emails = ({ fields }) => {
    // do something with fields
    return <div></div>
}

Is equavalent of:

const emails = (props) => {
    const {fields} = props;
    // do something with fields
    return <div></div>
}

Therefore if you pass it like

<FieldArray name={myArray} component={emails} myDictionary={myDictionary}/>

You will be able to access it like so:

const FieldArray = (props) =>{
    const {myDictionary} = props;
}