I can't find where this warning is playing or why, any ideas?
import React from 'react';
import logo from '../../../raw-assets/svg/logo.svg';
import line from '../../../raw-assets/svg/line.svg';
import 'whatwg-fetch';
import {backendURL, backendPort} from '../../components/connect.js';
if(process.env.NODE_ENV == 'production'){
var backend = "";
}else{
var backend = backendURL +':'+ backendPort;
}
import isMobile from 'ismobilejs';
var Menu = require('react-burger-menu').slide;
class ResponsiveHeader extends React.Component {
constructor() {
super();
this.state = {
categories: [],
mobile: 'span',
}
}
componentDidMount() {
fetch(backend+'/api/categories')
.then(result => result.json())
.then(categories => {this.setState({categories});
});
}
selectKey(event) {
this.setState({ exampleState: event.target.value });
}
render() {
if(!isMobile.any){
var control = 'logosection';
}else{
var control = 'logosection-mobile';
}
return (
<div className="header">
<div className={control}>
<div className="logo" dangerouslySetInnerHTML={{ __html: xxx }} />
<div className="line" dangerouslySetInnerHTML={{ __html: line }} />
<div className="labs">LABS</div>
</div>
{isMobile.any &&
<Menu right={1}>
<div className="check-sidebar">
<ul>
<div className="languages-header">
<p>CODE LANGUAGES:</p>
</div>
{
this.state.categories.map(c =>
<li className="checkbox">
<input id={c.id} type="checkbox" onChange={this.onChange.bind(this)} value={c.id}/>
<label htmlFor={c.id}></label>
<tag>{c.name}</tag>
</li>
)
}
</ul>
</div>
</Menu>
}
{!isMobile.any &&
<div className="check">
<div className="languages-header">
CODE LANGUAGES:
</div>
{
this.state.categories.map(c =>
<span className="checkbox">
<input id={c.id} type="checkbox" onChange={this.onChange.bind(this)} value={c.id}/>
<label htmlFor={c.id}></label>
<tag>{c.name}</tag>
</span>
)
}
</div>
}
</div>
);
}
onChange (e) {
this.context.applyFilters(parseInt(e.target.value));
}
}
ResponsiveHeader.contextTypes = {
applyFilters: React.PropTypes.func
};
export default ResponsiveHeader;
The importance of this is that we remember that React uses a virtual DOM to then make a diff with the real DOM, and know which element was updated.
What does all this have to do with the Keys??? If you do not enter a key when generating the list and you make a change to any of the children, the virtual DOM will understand that you have updated all of them and will re-render them, so it is necessary to enter a key, to help it and save time. performance.
As Alejandro says, just placing a
key = {{algunvalornorepetido}}
solves it.This error occurs when you are creating a list of elements in react and you don't add a different "key" for each of them, as I recall.
I think that ResponsiveHeader is adding elements within itself, I haven't touched react for months, but if you are going to create child components make sure that each child has a "key" similar to
For each of the child elements you create inside that Component