CODEWITHSUNDEEP
javascriptreactjsasynchronoussupabase
user3697597
user3697597

Reputation: 2179

How To Extract Value From A Promise And Display It In React?

I am building a React app with Supabase as my backend. I'd like to display the contents from several of my supabase tables, in React. However, I am pulling that data with a promise and I am unsure of how to display it in React. Below is my code:

SupaBase API Call: 

    async function getData() {
      const {data, other} = await getWriters().then(
        function(response) {
          for (var i = 0; i < response.length; i++) {
            var writerInfo = {}
            writerInfo['username'] = response[i].username
            writerInfo['bio'] = response[i].bio
            // console.log('Writer Name: ', response[i].username);
            // console.log('Writer Bio: ', response[i].bio);
            getTagIds(response[i].writerId).then(
              function(response2) {
                for (var j = 0; j < response2.length; j++) {
                  getTagNames(response2[j].tag_id).then(
                    function(response3) {
                      writerInfo['categories'] = []
                      // console.log('Categories: ')
                      for (var k = 0; k < response3.length; k++) {
                        // console.log(response3[k].tag_name)
                        writerInfo['categories'] = response3[k].tag_name
                      }
                    }
                  )
                }
              }
            )
          }
          return writerInfo['username']
        }
      )
      return data
    }

React Code:

export default function BrowsePage() {
  const classes = useStyles();
  const [listOfWriters, setListOfWriters] = useState({});

  const fetchData = async () => {
      setListOfWriters(getWriters())
    }


    console.log(getData())

  return (
    <Grid container spacing={3}>
      <Grid item sm={12}>
      <Navbar />
      </Grid>
      <Grid item xs={12} className={classes.root}>
      {getData}
      
      </Grid>
      <Grid item sm={12}>
      <Footer />
      </Grid>
    </Grid>
  );
}

Upvotes: 0

Views: 644

Answers (1)

Zhang TianYu
Zhang TianYu

Reputation: 1195

  1. I created a custom hook called useWriteList this is just another function. Check out this original documentation.

  2. useEffect just calls provided callback function when any of its dependency array changes.

In this case, only called at once when the component rendered for the first time since it's an empty array.

So you can think of it as a declaration like we will call this callback function whenever blabla changes.

Since it's just a declaration it doesn't block rendering flow.

  1. Inside callback we wait for data and set listOfWriters which will eventually cause a rerender.
    const useWriterList = () => {
      const [listOfWriters, setListOfWriters] = useState([]);
      useEffect(async () => {
        try {
          setListOfWriters(await getData());
        } catch (e) {}
      }, []);
      return listOfWriters;
    };
    
    export default function BrowsePage() {
      //...
      const listOfWriters = useWriterList();
    
      return (
        <Grid container spacing={3}>
          //...
          {listOfWriters.map(writer => (
            <div>
              {writer.name}
            </div>
          ))}
          //...
        </Grid>
      );
    }

Upvotes: 1

Related Questions