Szilard Magyar Szilard Magyar - 4 months ago 14
YAML Question

how to use static data in react

I have a select tag with over 40 options, so my component looks pretty lame. I'd rather create a static data file and iterate over the data, but I'm new to react and don't know what the proper way to solve this issue. Any ideas? Is YAML a good idea for react apps?

render() {
return (
<div>
<h4>Choose an arrival train station</h4>
<select className='form-control'
value={this.state.selected}
onChange={event => this.onInputChange(event.target.value)}>
<option value="12th">12th St. Oakland City Center</option>
<option value="16th">16th St. Mission (SF)</option>
<option value="19th">19th St. Oakland</option>
<option value="24th">24th St. Mission (SF)</option>
<option value="ashb">Ashby (Berkeley)</option>
<option value="balb">Balboa Park (SF)</option>
<option value="bayf">Bay Fair (San Leandro)</option>
<option value="cast">Castro Valley</option>
<option value="civc">Civic Center (SF)</option>
<option value="cols">Coliseum</option>
<option value="colm">Colma</option>
........
</select>
<div>{this.state.selected}</div>
</div>
);

Answer

You should just use js; including yaml for something that's probably going to be used on the web and so needs to be js anyways just complicates your build process. Making the options would look roughly like this:

const staticData = [
    { value: "...", label: "..." },
    // ...
];

<select>
{ staticData.map(o => <option value={o.value}>{o.label}</option>) }
</select>
Comments