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