React Redux issue delivering state value

I’m trying to show which values I choose from a select option of a component which has been populated previously using useSelector hook; ( not allowed to use React Select Library) My problem is first time I select it, I got an empty array returned; getting populated with first choosen value when is selected by second time. Every subsequent select, populate the array with the previous action value

Here is the related code:

const valueTemp = useSelector((state) => state.temperaments)

const [input, setInput] = useState({
    name: "",
    height_min: "",
    height_max: "",
    weight_min: "",
    weight_max: "",
    life_min: "",
    life_max: "",
    image: "",
    temperament: [],

 var arrTemps=[];

  function showValues(){
    for(var i = 0; i < input.temperament.length; i++){
      for(var j=0; j < valueTemp.length;j++){
    return arrTemps;

var showMe="" ;
  function handleSelect(e){  
        ...input, temperament:[...input.temperament, ]
<select className={style.orderLarge} onChange={handleSelect}>
   <option value="">Temperaments:</option>
     { => (
         <option key={} value={}>{}</option>              
 <div id="mostrame"style={{color:'burlywood'}}>Temperamentos:</div>

I would greatly appreciate your help! Regards in advance!


I am not sure why you were doing all looping logics for. As far as I understood you just needed the history of your dropdown. I will add my version of your code.

Your select was an uncontrol element. I have added value on that so now react controls it. Your history History: {[...input.temperament]} is available after the select. The selected value is the last item in the array. Instead of document.getElementById('mostrame').innerText=showMe; you can directly use the last selected value like I have done. You are not recommended to access DOM elements like you are doing. Display your selected item name as as shown. Everything is working because I am converting the selected value into a NUMBER. When you select an item value returned is a string. You need to convert that to a number if you are using number. temperament: [...input.temperament,]. Adding + will convert a string to number.

import React, { useState } from 'react';

export default function App() {
  const valueTemp = [
    { id: 1, name: 'abc' },
    { id: 2, name: 'efg' },
    { id: 3, name: 'hij' }

  const [input, setInput] = useState({
    temperament: []

  function handleSelect(e) {
      temperament: [...input.temperament,]

  return (
        value={input.temperament[input.temperament.length - 1]}
        <option value="">Temperaments:</option>
        { => (
          <option key={} value={}>
      <div>History: {[...input.temperament]}</div>
    History Values: 
    { => valueTemp.find(v => === i)?.name+", 
  <div>Selected value =
      v => === input.temperament[input.temperament.length - 1]