Lars Nyström Lars Nyström - 1 year ago 69
React JSX Question

Do I need to specify the key prop in this case and how would I do that then?

The following code seems to work as expected: (fiddle)

const headers = [
id: 'section-1',
header: 'section 1',
id: 'section-2',
header: 'section 2',
id: 'section-3',
header: 'section 3',
children: [
id: 'section-31',
header: 'section 31',
children: [
id: 'section-311',
header: 'section 311',
id: 'section-312',
header: 'section 312',
id: 'section-32',
header: 'section 32',
id: 'section-4',
header: 'section 4',

const Nav = ({ headers, className }) =>
<ul className={className}>
{ => [
<li className="list-group-item">
(header.children && header.children.length) ? (
<Nav className="list-group" headers={header.children} />
) : null,

const Toc = () =>
<div id="my-super-interesting-nav">
<Nav className="list-group nav-root" headers={headers} />

I the future the
array will be dynamic. I have three questions:

Why doesn't React complain that I haven't set the
prop on the child of the
call in

How bad will this confuse the reconciliation algorithm, given that the second assumption in the React reconciliation algorithm no longer holds?

If I wanted to specify a key in this case, how would I do that?

Answer Source

The mapping function you use returns an array of elements, and not a react element, so key property is not expected thus no warning are being given.

I would advise you to refactor your code for mapping function to return react element like so:

{ =>
    <li className="list-group-item" key={}>
            (header.children && header.children.length) 
            ? <Nav className="list-group" headers={header.children} /> 
            : null

Note, that now we are able to use the key property and it's benefits.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download