ReactJS dynamically add key to array of mixed content

Question

I'm trying to build a bootstrap v3, ReactJS component using TypeScript.

The props are as following:

export interface ICheckboxProps {
    checked?: boolean;
    text: string | JSX.Element | (string | JSX.Element)[];
    onChange?: (checked: boolean) => void;
}

As it can be seen, text can be a string, an JSX.Element or a listing of both.

This is the render method:

render(): JSX.Element {
    const { text, checked = false } = this.props;

    if (text instanceof Array) {
        // what should I do with?
    }

    return (
        <div className="checkbox">
            <label>
                <input type="checkbox" defaultChecked={checked} />{text}
            </label>
        </div>
    );
}

In another component I use this one <Checkbox text={["I accept the ", <Oem.ExternalLink href={"https://some.link.here"} linkText={"terms & conditions"} />]} />

However, I get the following error/warning:

Each child in an array or iterator should have a unique "key" prop. Check the render method of Checkbox

I know that it is related to the text property but I have no idea how I should add a key (even if I know that text is an array).

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

You should iterate through the array and apply the key prop to any JSX element you find. You can do this with React.cloneElement().

if (text instanceof Array) {
  text = text.map((item, idx) => {
    if(typeof item === 'string') {
      // if it's a string, then just return it.
      return item;
    }
    // otherwise it's a ReactElement. Return a clone of it with the a key prop.
    return React.cloneElement(text[idx], {key: idx}) )
  });
}

More info about React.cloneElement() on the official docs:

Clone and return a new React element using element as the starting point. The resulting element will have the original element’s props with the new props merged in shallowly. New children will replace existing children. key and ref from the original element will be preserved.

Demo

const A = () => <p>bar</p>;
const B = () => <p>bat</p>;

let text = ["foo", <A />, "baz", <B />];

class App extends React.Component {

  render() {
    if (text instanceof Array) {
      text = text.map((item, idx) => {
        if(typeof item === 'string') {
          return item;
        }
        return React.cloneElement(text[idx], {key: idx})
      });
    }
    return (
      <div>
        {text}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<div id="app"></div>

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jan 19, 2018 at 13:36

Chris

59.7k20 gold badges121 silver badges144 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

KingKerosin Over a year ago

I had to change the inner if to typeof item === "string" as item instanceof String seems not to work. But at the end, this worked. Thanks.

Chris Over a year ago

@KingKerosin, yes sorry for that. I added a demo as well.

Dyo · Accepted Answer · 2018-01-19 14:13:40Z

I think you'd better declare text as a single JSX element then wrap it in a <div> if you need a text + JSX :

<Checkbox text={<div> "I accept the " 
  <Oem.ExternalLink href={"https://some.link.here"} linkText={"terms & conditions"} />
  </div>}
/>

Edit : An even better approach is to use the recommanded way using a JSX child :

<Checkbox>
  <div>
    "I accept the "
    <Oem.ExternalLink 
       href={"https://some.link.here"}
       linkText={"terms & conditions"} 
    />
  </div>
</Checkbox>

Then in Checkbox component :

render(): JSX.Element {
    const { children, checked = false } = this.props;
    return (
        <div className="checkbox">
            <label>
                <input type="checkbox" defaultChecked={checked} />
                {children}
            </label>
        </div>
    );
}

Collectives™ on Stack Overflow

ReactJS dynamically add key to array of mixed content

2 Answers 2

Demo

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Demo

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related