Can I pass props to a React Component from a general function?

Question

   import B from './B.js'; 
   const Test = () => {
      
      async function getResults() {
        await axios
          .get(`http://localhost:2000/?url=${link}`)
          .then((response) => {
            <B data={response.data} />
          });
      }
      return (
        <>
          <div> 
           <button onClick={getResults}> Click </button>
         </div>
        </>
          )

I was trying to pass the axios data as props to my component B. But in console I got undefined value. How to solve this issue. Should I pass the props inside the return area of the Test Component only?

score 0 · Answer 1 · answered Jan 31 '22 at 05:44

0

You need to use useState to store data

import B from './B.js';
import { useState } from 'react'
const Test = () => {
  const [data, setData] = useState({})
  async function getResults () {
    await axios
      .get(`http://localhost:2000/?url=${link}`)
      .then((response) => {
        setData(response.data)
      });
  }
  return (
    <>
      <div>
        <button onClick={getResults}> Click </button>
        <B data={data} />

      </div>
    </>
  )
}

answered Jan 31 '22 at 05:44

Nikhil Tayal

76
5

Thanks. I think I've also need to add a conditional statement as the function is async, otherwise the B component will not render anything. – Amit Kumar Jan 31 '22 at 05:58
You need to use life cycle methods of react to make API call like useEffect – Nikhil Tayal Jan 31 '22 at 06:02

Can I pass props to a React Component from a general function?

1 Answers1