How can i see my array on my component ? / React / Javascript

Question

I have a element like :

const DropdownElements = [
  {
    key: 1,
    title: "Şehir",
    placeholder: "Şehir Seçiniz",
    apiUrl: "https://api.npoint.io/995de746afde6410e3bd",
    type: "city",
    selecteditem: "",
    data : [],
  },
  {
    key: 2,
    title: "İlçe",
    placeholder: "İlçe Seçiniz",
    apiUrl: "https://api.npoint.io/fc801dbd3fc23c2c1679", // its my apis. They hold datas from json
    type: "district",
    selecteditem: "",
    data : [],
  },
]

I fetching that url in App in useEffect.

const App = () => {
     useEffect(() => {
    DropdownElements.map((x) => {
     
      fetch(x.apiUrl)
        .then((z) => z.json())
        .then((vb) => {
         x.data=vb  // If i write x.data.push(vb) i can see it on my component but its not giving pure array.
         console.log(x.data) // I can see my datas perfectly. I trying fill my data.

          
            
         
        });
      
    });
    
  }, []);

And i setting it like that :

 <Space>
      {DropdownElements.map((x) => {
        return (
        
          <PickerCompanent
            showSearch
            selecteditem={idhold}
            key={x.key}
            
            placeholder={x.placeholder}
            type={x.type}
            datasource={x.data}  // I gave my datasource x.data that i filled .
            onFocus={onFocus}
            onChange={z=>onChange(z)}
            onFocus={onFocus}
            onSearch={onSearch}
          ></PickerCompanent>
        );
      })}
    </Space>

But in my component when i try write like console.log(props) my datasource is empty array. How can i see my datas on my component ? I need set my array to a state in my component.

@ShivamJha {DropdownElements.map((x) => { Its map element for map my element — Uğurcan Uçar
– Uğurcan Uçar, Commented Jun 7, 2021 at 13:04
Edit: ohh. ok. You should out your DropdownElements in a state (using useState hook), then look at this post to how to change state with array of object if you are having any doubts — Shivam Jha
– Shivam Jha, Commented Jun 7, 2021 at 13:07
You can wrap your pickers in a loader component: codesandbox.io/s/winter-meadow-ebgov?file=/src/App.js The main problem with your code is that you're changing the state directly (x.data=vb) which means React doesn't notice the change and will not re-render. — user5734311
– user5734311, Commented Jun 7, 2021 at 13:11

Squiggs. · Accepted Answer · 2021-06-07 13:07:09Z

1

It seems like you aren't using any kind of state in your code.

const App = () => {


 const [myData, setMyData] = useState();

     useEffect(() => {
         DropdownElements.map((x) => {
     
              fetch(x.apiUrl)
        .then((z) => z.json())
        .then((vb) => {
         x.data=vb  // If i write x.data.push(vb) i can see it on my component but its not giving pure array.
         console.log(x.data) // I can see my datas perfectly. I trying fill my data.
         // in here you'll want to be adding your data to some state
       // e.g. 
       setMyData(x.data); 

          
            
         
        });
      
    });
    
  }, []);

Then within your component, use that state:

datasource={myData}

answered Jun 7, 2021 at 13:07

Squiggs.

4,5028 gold badges56 silver badges94 bronze badges

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

Comments

Utonium · Accepted Answer · 2021-06-07 13:56:56Z

Your object is updating but not view. To achieve this you need have a component state, to which we can update and trigger return again to update view.

const App = () => {
 const [myData, setMyData] = useState(DropdownElements);

     useEffect(() => {
         myData.map((x, i) => {
             fetch(x.apiUrl)
             .then((z) => z.json())
             .then((result) => {
                myData[i].data = result;
                setMyData(myData);
              });
           });
      }, []);
      
   return (
      <Space>
        {myData.map((x) => {
          return (
            <PickerCompanent
              showSearch
              selecteditem={idhold}
              key={x.key}

              placeholder={x.placeholder}
              type={x.type}
              datasource={x.data}  // I gave my datasource x.data that i filled .
              onFocus={onFocus}
              onChange={z=>onChange(z)}
              onFocus={onFocus}
              onSearch={onSearch}
            ></PickerCompanent>
          );
        })}
      </Space>
   );

Collectives™ on Stack Overflow

How can i see my array on my component ? / React / Javascript

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related