I am using React.cloneElement on a component which is comprised of other divs.

Button.jsx

render() { return <button tabIndex="0" /> }

This Button is then sent as children to AnotherClass. There I want to remove the tabIndex from it, so I am doing this:

AnotherClass.jsx

render() { const children = React.cloneElement(this.props.children, { tabIndex: null });
    return <div tabIndex="0">{children}</div>;);

However this is not working, the children is still rendered with the tabIndex. Is there something wrong with what I am doing?