CODEWITHSUNDEEP
reactjs
sanket kheni
sanket kheni

Reputation: 1628

How to export const to other components react?

I created a file Category.js

import React, { useState } from 'react'

export const CategoryData = (props) => {
    const [Category, setCategory] = useState('')
    fetch('https://www.amrutras.com/Category.php')
        .then((response) => response.json())
        .then((responseJson) => {
            {
                setCategory(responseJson)

                // responseJson.map((item) => Alert.alert(item.Name))
            }

            // Showing response message coming from server after inserting records.
        })
        .catch((error) => {
            console.error(error)
        })
    return Category
}

export default CategoryData

I want to use this Category const in my other component.

I tried to do that with

import CategoryData from '../consts/CategoryData'

and using this function in useEffect of another component. like this.

useEffect(() => {
        console.log(CategoryData)
    })

But it's not working.

Upvotes: 1

Views: 5747

Answers (2)

Sayog
Sayog

Reputation: 770

Make it as a custom hook 

import React, { useState } from 'react'

export const useCategoryData = (props) => {
    const [Category, setCategory] = useState('')
    useEffect(()=>{
    fetch('https://www.amrutras.com/Category.php')
        .then((response) => response.json())
        .then((responseJson) => {
            {
                setCategory(responseJson)

                // responseJson.map((item) => Alert.alert(item.Name))
            }

            // Showing response message coming from server after inserting records.
        })
        .catch((error) => {
            console.error(error)
        })
},[])
    return {Category}
}

import it like

import {useCategoryData} from '.......'

const {Category} = useCategoryData()

Upvotes: 1

Shubham Khatri
Shubham Khatri

Reputation: 281686

You cannot use hooks directly within functions, unless they are custom hooks which you then cannot invoke inside other hooks but have to follow the rules of hooks to use them

You can restructure your code to implement CategoryData like a custom hook

export const useCategoryData = (props) => {
    const [Category, setCategory] = useState('')
    useEffect(() => {
       fetch('https://www.amrutras.com/Category.php')
        .then((response) => response.json())
        .then((responseJson) => {
            {
                setCategory(responseJson)

                // responseJson.map((item) => Alert.alert(item.Name))
            }

            // Showing response message coming from server after inserting records.
        })
        .catch((error) => {
            console.error(error)
        })
    }, [])
    
    return Category
}

export default useCategoryData;

Now you can use it in your component like

function App () {
   const categoryData = useCategoryData();
   ...
}

SOLUTION2:

Another way to implement this is to not use custom hook but implement a normal function like

export const CategoryData = (props) => {
    return fetch('https://www.amrutras.com/Category.php')
        .then((response) => response.json())
        })
        .catch((error) => {
            console.error(error)
        })
}

export default CategoryData

and use it like

function App () {
   const [categoryData, setCategoryData] = useState(null);
   useEffect(() => {
       CategoryData.then(res => setCategoryData(res));
  }, []); Make sure to provide a dependency list to your useEffect otherwise you will end up in a infinite loop
}

Upvotes: 2

Related Questions