//local component!!!!!
import { useState, useEffect } from "react";
import axios from "axios";
import React from "react";

const Getjokes = () => {
  const [joke, setjoke] = useState([]);
  const dadjokes = async () => {
    const num = Math.floor(Math.random() * 30)   1;
    const res = await axios.get(
      `https://icanhazdadjoke.com/search?page=${num}`,
      {
        headers: { Accept: "application/json" },
      }
    );
    setjoke(res.data.results);
  };

  useEffect(() => {
    dadjokes();
  }, []);
  const j1 = joke[1] ? joke[1].joke : null;
  return (
    <>
      <button onClick={dadjokes}></button>
      <p>{j1}</p>
    </>
  );
};
export default Getjokes;
//Main component!!!!!!!!!
import React from "react";
import Getjokes from "./Getjokes";
const App = () => {
  return (
    <div>
      <Getjokes />
    </div>
  );
};

export default App;

In the local component i have a button that fetches everytime a new joke from api on clicking.i wanna return this button in main component with the same functionality(no problem in api area i just want to know how i would able to use props here or may any other method to resolve it.

CodePudding user response：

Your question needs clarification. When app.js is rendered you can see the button of the local component on the screen.

Please clarify the meaning of

i just want to get acknowledged

CodePudding user response：

try this....

/local component!!!!!
import { useState, useEffect } from "react";
import axios from "axios";
import React from "react";

const Getjokes = (props) => {
  
  return (
    <>
      
      <p>{props.j1}</p>
      {props.children}

    </>
  );
};
export default Getjokes;
//Main component!!!!!!!!!
import React from "react";
import Getjokes from "./Getjokes";
const App = () => {
 const [joke, setjoke] = useState([]);
  const dadjokes = async () => {
    const num = Math.floor(Math.random() * 30)   1;
    const res = await axios.get(
      `https://icanhazdadjoke.com/search?page=${num}`,
      {
        headers: { Accept: "application/json" },
      }
    );
    setjoke(res.data.results);
  };

  useEffect(() => {
    dadjokes();
  }, []);
  const j1 = joke[1] ? joke[1].joke : null;
  
  return (
    <div>
      <Getjokes j1 = {j1}>
         <button onClick={dadjokes}>getJoke</button>
      </Getjokes>
    </div>
  );
};

export default App;