Reactjs looping through object with map - reactjs

Question

I'm not sure what kind of problem this is, but I have a state.sports which contains some data about sports. I added new data to this object and then I tried to render it on the DOM with this component.
class AddProject extends Component {
constructor() {
super();
this.state = {
newSport:{}
}
this.handleSubmit = this.handleSubmit.bind(this);
}
static defaultProps = {
Types:['air','aquatic','land']
}
handleSubmit(e){
if (!this.refs.sport.value) {
alert("title required");
} else {
this.setState({
newSport:{
sport: this.refs.sport.value,
type: this.refs.type.value
}
},function() {
this.props.addSport(this.state.newSport);
});
}
e.preventDefault();
}
render() {
let typeOptions = this.props.Types.map(type => {
return <option key={type} value={type}>{type}</option>
});
return (
<div className="addproject">
<h3>Add project </h3>
<form onSubmit={this.handleSubmit}>
<div>
<label>Sport </label><br/>
<input type="text"
key="sport"
ref="sport"
placeholder="Add project" />
</div>
<div>
<label>Type</label><br/>
<select ref='type'>
{typeOptions}
</select>
</div>
<input type='submit' value='Submit' />
</form>
</div>
);
}
}
export default AddProject;
Then I added this formatted data into a list with this component:
class Project extends Component {
render() {
let Sports;
//check if there is data in props.sports which is bind to state.sports
if (this.props.sports) {
Sports = this.props.sports.map(sport => {
return (
//after some expirements i found that the key is the cause of the problem
<ProjectItems key={sport.name} sport={sport} />
);
});
}
return (
<div className="project">
<h1>List </h1>
<ul>
{Sports}
</ul>
</div>
);
}
}
Then ProjectItems formats the data into name of the sport and type of sport. Anyway when I enter some data it only renders the type of sport and the sport's name returns undefined, like here. Can you tell me what's wrong ?

Answer 1

It would be more clear if you gave code of ProjectItems class, but at first glance it looks like in handleSubmit method you sholud change this:
newSport:{
sport: this.refs.sport.value,
type: this.refs.type.value
}
to this:
newSport:{
name: this.refs.sport.value,
type: this.refs.type.value
}

Answer 2

maybe what you want to achieve is set a nested object properties on the state.
use this:
this.setState(
{newSport:
update(this.state.newSport,
{type: {$set: this.refs.type.value}},
{name: {$set: this.refs.sport.value}}
)
});
the sports JSON structure will be:
newSport: {type: "air", name: "land"}
the
then you can display the sports:
this.props.sports.map(sport => {
return (
//the key will not be a problem, since now it has values in it.
<ProjectItems key={sport.name} sport={sport} />
);