React -- conditional render not clear input value - reactjs

Question

My code is
class Com extends React.Component {
constructor(props) {
super(props);
this.state = {is_clicked: false};
}
render() {
let sub_com1 = () => {
return (
<div>Input1:<input/></div>
);
};
let sub_com2 = () => {
return (
<div>Input2:<input/></div>
);
};
return (
<div>
<div>
{this.state.is_clicked ? sub_com1() : sub_com2()}
</div>
<button onClick={()=>{
let is_clicked=this.state.is_clicked;
this.setState({is_clicked: !is_clicked});
}}>
Click me
</button>
</div>
);
}
}
and the live display: codepen.
In this code, I use conditional rendering in Com's render method.
What I expect
Each time I click the button, the input area should be cleared since it is rendered to another component
What I met
Each time I click the button, the "input1" or "input2" label has changed, but the input area is not cleared.

Answer 1

To fix this issue you have to add key attributes to your input elements, change the code be like this and it will work:
class Com extends React.Component {
constructor(props) {
super(props);
this.state = {is_clicked: false};
}
render() {
let sub_com1 = () => {
return (
<div>Input1:<input key={1} id='A' /></div>
);
};
let sub_com2 = () => {
return (
<div>Input2:<input key={2} id='b' /></div>
);
};
return (
<div>
<div>
{this.state.is_clicked ? sub_com1() : sub_com2()}
</div>
<button onClick={()=>{
let is_clicked=this.state.is_clicked;
this.setState({is_clicked: !is_clicked});
}}>
Click me
</button>
</div>
);
}
}
ReactDOM.render(
<Com/>,
mountNode,
);
The following article discuss it in more depth and why its important to have key attribute for elements:
full article: keys-in-children-components-are-important
Key is not really about performance, it’s more about identity (which
in turn leads to better performance). Randomly assigned and changing
values do not form an identity Paul O’Shannessy