In my jsx return statement for a functional component, my code is breaking at the line below, with the message: "foreignKeys[0] is undefined."

{foreignKeys && <h4>{foreignKeys[0].values.map((item) => <p >ID: {item.id} NAME: {item.name}</p>)}</h4>}

Note: I also tried:

{!!foreignKeys && <h4>{foreignKeys[0].values.map((item) => <p >ID: {item.id} NAME: {item.name}</p>)}</h4>}

and

{foreignKeys.length > 0 && <h4>{foreignKeys[0].values.map((item) => <p >ID: {item.id} NAME: {item.name}</p>)}</h4>}

My understanding was that if foreignKeys were "falsey" (i.e. an empty array) then the code wouldn't even try to evaluate the second part of the && clause, i.e., foreignKeys[0] . . . ). If my understanding is correct, why is the code breaking on foreignKeys[0]?

i.e., if foreignKeys is falsey, then the code shouldn't attempt to evaluate foreignKeys[0]..., and if it's not falsey, then foreignKeys[0] should be defined, right? What am I missing? Thank you!

Note for reference: foreignKeys is a state variable, defined below:

const [foreignKeys, setForeignKeys] = useState([]);

and is only set once on the first render:

useEffect(() => {
    fetchItems();
  }, []);

. . .

  const fetchItems = async () => {
    try {
      const res = await axios.get(`http://localhost:5000/api/foreignkeys`, {params: {table: tblName}});
      if (res.data.length!==0) {
        res.data.map((item) => {
          setForeignKeys([...foreignKeys, item]);
        });
      }

In my jsx return statement for a functional component, my code is breaking at the line below, with the message: "foreignKeys[0] is undefined."

{foreignKeys && <h4>{foreignKeys[0].values.map((item) => <p >ID: {item.id} NAME: {item.name}</p>)}</h4>}

Note: I also tried:

{!!foreignKeys && <h4>{foreignKeys[0].values.map((item) => <p >ID: {item.id} NAME: {item.name}</p>)}</h4>}

and

{foreignKeys.length > 0 && <h4>{foreignKeys[0].values.map((item) => <p >ID: {item.id} NAME: {item.name}</p>)}</h4>}

My understanding was that if foreignKeys were "falsey" (i.e. an empty array) then the code wouldn't even try to evaluate the second part of the && clause, i.e., foreignKeys[0] . . . ). If my understanding is correct, why is the code breaking on foreignKeys[0]?

i.e., if foreignKeys is falsey, then the code shouldn't attempt to evaluate foreignKeys[0]..., and if it's not falsey, then foreignKeys[0] should be defined, right? What am I missing? Thank you!

Note for reference: foreignKeys is a state variable, defined below:

const [foreignKeys, setForeignKeys] = useState([]);

and is only set once on the first render:

useEffect(() => {
    fetchItems();
  }, []);

. . .

  const fetchItems = async () => {
    try {
      const res = await axios.get(`http://localhost:5000/api/foreignkeys`, {params: {table: tblName}});
      if (res.data.length!==0) {
        res.data.map((item) => {
          setForeignKeys([...foreignKeys, item]);
        });
      }

• jsx

• May I know the structure of the API response to be inserted into foreignKeys? Maybe it is the structure that were not right – Faiz Byputra Commented Mar 19 at 6:18

2 Answers 2

The reason its not working because you are checking if the foreignKeys are truthy are not. The foreignKeys variable will be truthy when it is any value that JavaScript considers "true" in a boolean context, meaning it is not falsy. In your case, foreignKeys is initialized as an empty array (useState([])), and it will be truthy when it contains any value that is not null, undefined, false, 0, NaN, or an empty string ""

Instead of checking for the truthy you can check the length of an array.

{foreignKeys.length > 0 && foreignKeys[0].values && (
  <h4>
    {foreignKeys[0].values.map((item) => (
      <p key={item.id}>
        ID: {item.id} NAME: {item.name}
      </p>
    ))}
  </h4>
)}

Also instead of looping throughthe data items why not just append like

 if (res.data.length!==0) {
    setForeignKeys([...foreignKeys, res.data]); 
 }

There were 2 things wrong:
1. I needed (foreignKeys.length > 0) && instead of foreignKeys &&
2. I needed Object.values(foreignKeys[0]).map instead of foreignKeys[0].values.map
[Note: using foreignKeys[0].values.map was a suggestion from CoPilot and it looked strange to me at the time it was suggested, but I thought to myself, "well, it's coming from an AI so it must be correct." Lesson learned!!