Json information into a div component react

Question

Im new to learning react and for some reason I can not grasp how to put json data into a specific part of my code. I have done it another way but it seems messy so I want to organize it into a json file.

GameVers.json
[
    { "value": "Red-blue", "id": "1" },
    { "value": "Yellow", "id": "2" },
    { "value": "gold-silver", "id": "3" },
]

    render() {
    const filteredPokemon = this.state.pokedex.filter(pokemon => {
        return pokemon.name.toLowerCase().includes(this.state.searchfield.toLowerCase());
    })
    const gmeVs = require("./GameVers");

    return (
        <div>
            <h1>Pokemon Type Strength</h1>
            <p>Select your game and pokemon to see what types they can beat</p>
            <SearchBox searchChange={this.onSearchChange}/>
            <div style={{margin: '16px' , position: 'relative'}}>
                <FilterVers 
                    width={200}
                    name='game_id'
                    items={[ 
                        { "value": "Red-blue", "id": "1" },
                        { "value": "Yellow", "id": "2" },
                        { "value": "gold-silver", "id": "3" },
                        { "value": "crystal", "id": "4" },
                    ]}
                />
            </div>
            <PanelList pokedex={filteredPokemon}/>
        </div>
        );
}

What I want is to get a json or js (GameVers.json) file into the <filterVers items={json here} part for my filter component instead of how it is currently.

This list is alot longer and I shortened it for viewing. Rather have this long list in another file then in the middle of my code. I have tried a few ways for .map() it in but it never comes out right.

Thanks!

Answer 1

I think first instead of making it a *.json file, make it a normal *.js file so you can import it.

GameVers.js

const gameVers = [
  { "value": "Red-blue", "id": "1" },
  { "value": "Yellow", "id": "2" },
  { "value": "gold-silver", "id": "3" },
  ....
];

export default gameVers;

You should be able to import the JSON array from file as normal.

import gameVers from './GameVers';

And now you can use it like any other JS array/object.

<FilterVers 
  width={200}
  name='game_id'
  items={gameVers} // <-- pass array as prop
/>