CODEWITHSUNDEEP
javascriptarraysreactjsuse-state
Ole Nor
Ole Nor

Reputation: 145

Getting undefined array after .map()

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>

Upvotes: 0

Views: 54

Answers (3)

thenaamsake
thenaamsake

Reputation: 284

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]);

Upvotes: 0

Judicael
Judicael

Reputation: 26

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>
  );
} ```

Upvotes: 1

Jarosław Pokropiński
Jarosław Pokropiński

Reputation: 31

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.

Upvotes: 1

Related Questions