Getting undefined array after .map()

Question

I am trying to insert the first value in a array in a useState but it comes as undefined. I know that the array contains the value that.

    let {id} = useParams();
    const [currentJacuzzi, setCurrentJacuzzi] = useState();
    const {jacuzzis} = useContext(JacuzziContext);
    const [mappedJacuzzis, setMappedJacuzzis] = useState([]);

    useEffect(() => {
        const tempArr = jacuzzis.filter(jacuzzi => jacuzzi.brand === id);
        const mapped = tempArr.map((obj) => (
            {
                name: obj.name,
                about: obj.aboutProduct,
                image: obj.images[0].image
            }
        ));
        setMappedJacuzzis(mapped); 
        setCurrentJacuzzi(mappedJacuzzis[0]); //-- mappedJacuzzis contains an array with objects at this point. But 
    }, [jacuzzis]);

mappedJacuzzis contains a array with 3 objects, I wish to get a new value containing only the first object in this array. currentJacuzzi should contain the first value, but is undefined.

   <Row className="justify-content-center">
     <h1>{currentJacuzzi.name}</h1>
   </Row>
   <Row className="justify-content-center mr-5 ml-5">
     <p>{currentJacuzzi.about}</p>
   </Row>

probaly because tempArr is empty? Can check if tempArr has the filtered options as expected — thenaamsake
– thenaamsake, Commented Apr 8, 2021 at 10:20
tempArr is not empty, mappedJacuzzis is not empty and contains what is expected. Its when I try to assign the first value in mappedJacuzzis array it becomes undefined. @thenaamsake — Ole Nor
– Ole Nor, Commented Apr 8, 2021 at 10:22

Judicael · Accepted Answer · 2021-04-08 10:33:04Z

1

make a condition before you add the currentJacuzzi like this, because in the first render, it's value is undefined

import "./styles.css";
const dummyData = [
  {
    id: 1,
    text: "something one"
  },
  {
    id: 2,
    text: 'something two'
  }
]
export default function App() {
  const [mappedJagg, setMappedJagg] = useState([])
  const [currentJagg, setCurrentJagg] = useState()

  useEffect(() => {
    const filtered = dummyData.filter(fi => fi.id === 1)
    const mapped = filtered.map(f => ({
      id: f.id,
      text: f.text
    }))
    setMappedJagg(mapped)
    setCurrentJagg(mapped[0])
  }, [])

  // useEffect(() => {
  //   console.log(currentJagg.text)
  // }, [currentJagg])
  return (
    <div className="App">
      <h1>{currentJagg && currentJagg.text}</h1> // add a condition like this
    </div>
  );
} ```

answered Apr 8, 2021 at 10:33

Judicael

261 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

Jarosław Pokropiński · Accepted Answer · 2021-04-08 10:24:18Z

1

Cant you just use setCurrentJacuzzi(mapped[0]); if mappedJacuzzis is just set with this value? setMappedJacuzzis won't change value of mappedJacuzzis immediately and you haven't even placed mappedJacuzzis in dependency array.

answered Apr 8, 2021 at 10:24

Jarosław Pokropiński

312 bronze badges

Comments

thenaamsake · Accepted Answer · 2021-04-08 10:33:14Z

The possible problem might be that when you are setting setMappedJacuzzis(mapped) and using the updated state in the same block which might not be updated yet. you can just use setCurrentJacuzzi(mapped[0]) if you don't want to do that use a seprate useEffect hook with mappedJacuzzis in the dependency array.

first method

    useEffect(() => {
        const tempArr = jacuzzis.filter(jacuzzi => jacuzzi.brand === id);
        const mapped = tempArr.map((obj) => (
            {
                name: obj.name,
                about: obj.aboutProduct,
                image: obj.images[0].image
            }
        ));
        setMappedJacuzzis(mapped); 
        setCurrentJacuzzi(mapped[0]); //-- mappedJacuzzis is a array with objects
    }, [jacuzzis]);

second method

    useEffect(() => {
        const tempArr = jacuzzis.filter(jacuzzi => jacuzzi.brand === id);
        const mapped = tempArr.map((obj) => (
            {
                name: obj.name,
                about: obj.aboutProduct,
                image: obj.images[0].image
            }
        ));
        setMappedJacuzzis(mapped); 
    }, [jacuzzis]);

    useEffect(() => {
      const currentJacuzzi = mappedJacuzzis[0]
      setCurrentJacuzzi(currentJacuzzi);
    },[mappedJacuzzis]);

Collectives™ on Stack Overflow

Getting undefined array after .map()

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related