useSWR Hook returns undefined

Question

I have a create-example.js file inside the pages folder, so the structure is pages/examples/create-example .

I am fetching two url endpoints using the useSWR hook inside my create-example.js file and then the data is passed to my via props like this

<ExampleComponent intent_data = {intent_data}/>} entity_data = {entity_data}/>

The problem is when I console the intent_data and entity_data inside my create-example.js file I get that data in my console, BUT when I destructure them in my <ExampleComponent/> then I get the data for intent_data but for entity_data I get undefined

My create-example.js code

import ExampleComponent from "../../components/ExampleComponent/CreateExampleComponent"
import MainComponentLayout from "../../components/Layout/MainLayoutComponent"
import useSWR from "swr"
import axios from "axios"
const intent_fetcher = (url) => axios.get(url).then(response => response.data)
const entity_fetcher = (url) => axios.get(url).then(response => response.data)
const CreateExamplePage = () => {
    const {data:intent_data,error:intentError} = useSWR(`https://jsonplaceholder.typicode.com/todos`,intent_fetcher)
    const {data:entity_data,error:entityError} = useSWR(`https://jsonplaceholder.typicode.com/users`,entity_fetcher)
    // console.log(intent_data)
    console.log(entity_data)
    return(
        <MainComponentLayout ComponentToRender = {<ExampleComponent intent_data = {intent_data}/>} entity_data = {entity_data}/>
    )
}
export default CreateExamplePage

ExampleComponent Code

const ExampleComponent = (props) => {
  const {intent_data,entity_data} = props 
  const test = entity_data?.map?.((value) => value.title)
  console.log(test)
  console.log(entity_data)
  const [form] = Form.useForm();
  const onFinish = (values: any) => {
    console.log(values);
    form.resetFields()
  };
  return (
    <Card className="csi-project-card-0934">
      <Form
        form={form}
        labelCol={{ span: 7 }}
        wrapperCol={{ span: 10 }}
        layout="horizontal"
        colon={true}
        onFinish={onFinish}
        size="large"
      >
        <Form.Item
          label="Select Intent"
          name="intent_name"
          className="csi-ant-form-item"
          rules={[{ required: true, message: "Intent Cannot be Empty!" }]}
        >
          <Select>      
             {intent_data?.map?.((value) => <Select.Option key = {value.id} value={value.title}>{value.title}</Select.Option>)}
          </Select>
        </Form.Item>
        
        

        <Form.Item
          label="Select Entity"
          name="selected_entity"
          className="csi-ant-form-item"
          rules={[{ required: true, message: "Cannot be Empty!" }]}
        >
          <Select>
            {/* {entity_data?.map?.((value) => <Select.Option key = {value.id} value={value.title}>{value.title}</Select.Option>)} */}
          </Select>
        </Form.Item>
        

        <Form.Item className="csi-ant-form-item">
          <Space style={{ marginLeft: "35vw" }}>
            <Button key="submit" type="primary" htmlType="submit" shape="round">
              Add Entity <PlusOutlined />
            </Button>
          </Space>
        </Form.Item>
      </Form>
    </Card>
  );
};

To sum up My Problem :- console.log(entity_data) in ExampleComponent gives undefined, whereas intent_data gives proper data.

Expected Outcome:- Both entity_data and intent_data should give proper array of objects as data

Link I referred to fetch multiple endpoint using useSWR hook is Calling multiple endpoints using NextJS and the SWR library

Answer 1

Maybe try to check if data is there first. You won't get undefined

if(intent_data){
   console.log(intent_data)
}

And then pass the intent_data to your component with an if or conditional statement.

Answer 2

That was a really very silly mistake from my side, I was not passing props correctly to my <ExampleComponent/>

So then only line to be Changed was from this

<MainComponentLayout ComponentToRender = {<ExampleComponent intent_data = {intent_data}/>} entity_data = {entity_data}/>

To this

<MainComponentLayout ComponentToRender = {<ExampleComponent intent_data = {intent_data} entity_data = {entity_data}/>}/>