I have been trying to get my dynamic form to work but I was wondering what the best practice is to save data generated like this.
My solution works but I have the feeling there is a better way of doing it.
At the moment I am saving both of the values of the input fields in a seperate array. But actually they belong together, so I have a link value and a content value that I need to save.
Later I need to map over these values to create new elements with the stored value.
The problem I have now is that I don’t know how to map over two arrays at the same time. I am also wondering if it’s not better to just create one Object with all of these values instead and then just map over that.
Hope someone can help me out.
This is my code:
class MediaInput extends React.Component {
render() {
const linkName = `link${this.props.index}`;
const contentName = `content${this.props.index}`;
return (
<div>
<ControlLabel>Media (optional)</ControlLabel>
<input
onChange={(event) => this.props.handleChangeUrl(event, this.props.index)}
name={ linkName }
value={ this.props.mediaUrls[this.props.index]}
className="form-control"
placeholder="Add your media url. We accept YouTube, Vimeo and SoundCloud links"
type="text"
/>
<input
name={ contentName }
onChange={(event) => this.props.handleChangeContent(event, this.props.index)}
value={ this.props.mediaContents[this.props.index]}
className="form-control"
placeholder="Add your media content"
type="text"
/>
</div>
);
}
}
export default class AddSparkShanghai extends Component {
constructor(props) {
super(props);
this.createSpark = this.createSpark.bind(this);
this.onChange = this.onChange.bind(this);
this.handleChangeUrl = this.handleChangeUrl.bind(this);
this.handleChangeContent = this.handleChangeContent.bind(this);
this.state ={
mediaFields: [],
content: [],
mediaUrls: [ null, null, null ],
mediaContents: [ {'', '', ''],
};
}
[...]
// Add/remove media fields
add() {
event.preventDefault();
const mediaFields = this.state.mediaFields.concat(MediaInput);
if (i < 3) {
this.setState({ mediaFields });
i++
} else {
Bert.alert('Only 3 media links are allowed', 'danger');
}
}
remove() {
event.preventDefault();
const lastElement = this.state.mediaFields.pop();
const mediaFields = this.state.mediaFields;
this.setState({ mediaFields });
i--
}
// Handle change media fields
handleChangeUrl(e, index) {
// Shallow copy of array
const mediaUrls = this.state.mediaUrls.slice();
let url = e.target.value
if (!/^https?:\/\//i.test(url)) {
url = 'http://' + url;
}
mediaUrls[index] = url;
this.setState({ mediaUrls});
}
handleChangeContent(e, index) {
// Shallow copy of array
const mediaContents = this.state.mediaContents.slice();
mediaContents[index] = e.target.value;
this.setState({ mediaContents });
}
[...]
const mediaFields = this.state.mediaFields.map((Element, index) => {
return <Element key={ index } index={ index } mediaUrls={this.state.mediaUrls} mediaContents={this.state.mediaContents} handleChangeUrl={this.handleChangeUrl} handleChangeContent={this.handleChangeContent} />
})
[...]
<div>
{ mediaFields }
<Button onClick={ () => this.add() }>Add media field</Button>
<Button onClick={ () => this.remove() }>Remove media field</Button>
</div>