Use React.cloneElement to give array elements keys instead of hardcoding

This commit is contained in:
Kyle Shockey
2017-11-08 22:41:29 -08:00
parent c0f80ebdf2
commit d063987883

View File

@@ -1,4 +1,4 @@
import React from "react"
import React, { cloneElement } from "react"
import PropTypes from "prop-types"
//import "./topbar.less"
@@ -112,7 +112,7 @@ export default class Topbar extends React.Component {
})
control.push(
<label key={1} className="select-label" htmlFor="select"><span>Select a spec</span>
<label className="select-label" htmlFor="select"><span>Select a spec</span>
<select id="select" disabled={isLoading} onChange={ this.onUrlSelect } value={urls[this.state.selectedIndex].url}>
{rows}
</select>
@@ -121,8 +121,8 @@ export default class Topbar extends React.Component {
}
else {
formOnSubmit = this.downloadUrl
control.push(<input key={1} className="download-url-input" type="text" onChange={ this.onUrlChange } value={this.state.url} disabled={isLoading} style={inputStyle} />)
control.push(<Button key={2} className="download-url-button" onClick={ this.downloadUrl }>Explore</Button>)
control.push(<input className="download-url-input" type="text" onChange={ this.onUrlChange } value={this.state.url} disabled={isLoading} style={inputStyle} />)
control.push(<Button className="download-url-button" onClick={ this.downloadUrl }>Explore</Button>)
}
return (
@@ -134,7 +134,7 @@ export default class Topbar extends React.Component {
<span>swagger</span>
</Link>
<form className="download-url-wrapper" onSubmit={formOnSubmit}>
{control}
{control.map((el, i) => cloneElement(el, { key: i }))}
</form>
</div>
</div>