How to stock new div and keep previous value in react?

I want to make a dynamic display of my card depending on the one I’ve selected. For this I’ve made a Selected, then depending on my choice, I stock the component of the card inside a div in a state and then I try to display them. But when I print the content of the state, it’s empty. How do I keep the value of the previous selected component and add a new one to it in my state please.

This is what I have for the moment.

import React, {Component} from 'react'
import DofusCard from '../Dofus/DofusCard'
import ExchangeWidget from '../Exchange/ExchangeWidget'
import ImgurCards from '../imgur/ImgurCard'
import OutlookCards from '../Outlook/OutlookCards'
import VDMCards from '../VDM/VDMCard'
import WeatherCards from '../Weather/WeatherCards'
import Cards from './Card'
import Select from '@material-ui/core/Select';
import Grid from '@material-ui/core/Grid';

class SelectService extends Component {
    state = {
        value: '',
        userInfo: {}
    }

    handleSubmit = (e) => {
        e.preventDefault()
        console.log("STATE", this.state.value)
        if (this.state.value === "spotify") {
            const stockCard = 
            <Grid item xs={2}>
                    <Cards />
                </Grid>
                this.setState({
                    userInfo: {...this.state.userInfo}, stockCard
                })
            }
            if (this.state.value === "imgur") {
                const stockCard = 
                <Grid item xs={2}>
                    <ImgurCards />
                </Grid>
                this.setState({
                    userInfo: {...this.state.userInfo}, stockCard
                })
            }
            if (this.state.value === "weather") {
                const stockCard = 
                <Grid item xs={2}>
                    <WeatherCards />
                </Grid>
                this.setState({
                    userInfo: {...this.state.userInfo}, stockCard
                })
            }
            if (this.state.value === "game") {
                const stockCard = 
                <Grid item xs={2}>
                    <DofusCard />
                </Grid>
                this.setState({
                    userInfo: {...this.state.userInfo}, stockCard
                })
            }
            if (this.state.value === "exchange") {
                const stockCard = 
                <Grid item xs={2}>
                    <ExchangeWidget />
                </Grid>
                this.setState({
                    userInfo: {...this.state.userInfo}, stockCard
                })
            }
            if (this.state.value === "outlook") {
                const stockCard = 
                <Grid item xs={2}>
                    <OutlookCards />
                </Grid>
                this.setState({
                    userInfo: {...this.state.userInfo}, stockCard
                })
            }
            if (this.state.value === "facts") {
                const stockCard = 
                <Grid item xs={2}>
                    <VDMCards />
                </Grid>
                this.setState({
                    userInfo: {...this.state.userInfo}, stockCard
                })
            }
        }
    
        handleChange = (e) => {
            this.setState({
                value: e.target.value
            })
        }
        
        onChange = (e) => {
            this.setState({
                name: e.target.value,
                userInfo: this.props.data
            })
        }

    render() {
        return(
            <div>
                <form onSubmit={this.handleSubmit}>
                    <Select value={this.state.value} onChange={this.handleChange} style={{position:"relative", bottom:'-1px', marginLeft: '10px'}}>
                        <option value="spotify"> Spotify </option>
                        <option value="imgur"> Imgur </option>
                        <option value="weather"> Weather </option>
                        <option value="game"> Game </option>
                        <option value="exchange"> Exchange </option>
                        <option value="outlook"> Outlook </option>
                        <option value="facts"> Facts </option>
                    </Select>
                    <div style={{marginTop: '10px', display: 'inline-block'}}>
                        <input type="submit" value="Search" className="playlist-btn" />
                    </div>
                </form>
                {console.log("value ==>", this.state.userInfo)}
            </div>
        )
    }
}

export default SelectService

Answer

You could simplify and improve your code around stockCards and the ifs (really a switch) in handleSubmit. You can create an object to map stockCards codes, names and components. In this example, I create this object as a member of the component (this), but can also be declared in the module scope as a const. This last option can reduce memory usage.

Also, you don’t need to set userInfo state with its own value from state.

// imports...
class SelectService extends Component {
  state = {
    value: '',
    userInfo: {}
  }
  stockCards = {
    spotify: {
      name: "Spotify",
      component: Cards,
    },
    imgur: {
      name: "Imgur",
      component: ImgurCards,
    },
    weather: {
      name: "Weather",
      component: WeatherCards,
    },
    game: {
      name: "Game",
      component: DofusCards,
    },
    exchange: {
      name: "Exchange",
      component: ExchangeCards,
    },
    outlook: {
      name: "Outlook",
      component: OutlookCards,
    },
    facts: {
      name: "Facts",
      component: VDMCards,
    },
  }

  handleSubmit = (e) => {
    e.preventDefault()
    console.log("STATE", this.state.value)

    if (this.state.value in this.stockCards) {
      const stockCard = this.stockCards[this.state.value].component;
      this.setState({ stockCard });
    }
  }

  handleChange = (e) => {
    this.setState({
      value: e.target.value
    })
  }

  // `onChange` is not used

  render() {
    console.log("value ==>", this.state.userInfo);

    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <Select value={this.state.value} onChange={this.handleChange} style={{position:"relative", bottom:'-1px', marginLeft: '10px'}}>
             { Object.keys(this.stockCards)
                 .map( key => 
                   <option key={key} value={key}> {this.stockCards[key].name} </option>
                 )
             }
          </Select>
          <div style={{marginTop: '10px', display: 'inline-block'}}>
            <input type="submit" value="Search" className="playlist-btn" />
          </div>
        </form>
      </div>
    )
  }
}

export default SelectService;

Depending where the stockCard state is used, you’ll need to add full render logic:

  // Need to be uppercase to render it as a component
  const {stockCard: StockCard} = this.state;

  // ... until the `return` section

  <Grid item xs={2}>
    <StockCard />
  </Grid>