Passing data from other component on ReactJs-CodePudding

im new on javascript, especially React.

so i made a page using API that need user to input for "search". How can i pass the "user input" from the Content component ? here's my code. The Api component need "user input" on params.term

Please, explain with the simpler way, because im new here. Thanks in Advance ^^

This is my Content Component

import { GetUrban } from "../Api";
import { useState } from "react";

const Content = () => {
  const [urbanList, setUrban] = useState([]);
  const [inputValue, setInputValue] = useState([]);

  const submitValue = () => {
    setInputValue(inputValue);
    GetUrban().then((result) => {
      setUrban(result);
    });
  };

  return (
    <div>
      <div className="headerContainer parent">
        
        <div className="searchBar">
          <input
            placeholder="Put something here"
            className="input"
            name="text"
            type="text"
            onChange={((e) => setInputValue(e.target.value))}
          ></input>
          <div className="urbanBar">
            <button className="cta" type="submit">
              <span className="hover-underline-animation"
              onClick={submitValue}>
                {" "}
                SEARCH FOR URBAN DICTIONARY HERE{" "}
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Content;

This is my Api Component

import axios from "axios";

const optionsUrban = {
  method: 'GET',
  url: 'https://mashape-community-urban-dictionary.p.rapidapi.com/define',
  params: { term: {HOW CAN I PASS THE DATA HERE?} },
  headers: {
    'X-RapidAPI-Key': 'API KEY HERE',
    'X-RapidAPI-Host': 'mashape-community-urban-dictionary.p.rapidapi.com'
  }
};

export async function GetUrban() {
  const api2 = await axios.request(optionsUrban);
  return api2.data;
}

I already make it with single component and it works. But my question is what if i made it separately, the Api component and page component. i also tried to take my "input data" manually using console.log, and its work. (but im not showing on this code)

Does that mean my Api component being the child of my Content component? and Should i import using ? kinda confused with it, because when im not import it using that, i still getting the data (if i put the params.term manually)

CodePudding user response：

Your Content component:

import { GetUrban } from "../Api";
import { useState } from "react";

const Content = () => {
  const [urbanList, setUrban] = useState([]);
  const [inputValue, setInputValue] = useState([]);
   
  const submitValue = () => {
    GetUrban(inputValue).then((result) => {
      console.log(result)
      setUrban(result);
    });
  };

  return (
    <div>
      <div className="headerContainer parent">
        
        <div className="searchBar">
          <input
            placeholder="Put something here"
            className="input"
            name="text"
            type="text"
            onChange={((e) => setInputValue(e.target.value))}
          ></input>
          <div className="urbanBar">
            <button className="cta" type="submit">
              <span className="hover-underline-animation"
              onClick={submitValue}>
                {" "}
                SEARCH FOR URBAN DICTIONARY HERE{" "}
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Content;

Your GetUrban function:

import axios from "axios";
            
   export async function GetUrban(inputValue) {
     const api2 = await axios.get('https://mashape-community-urban- 
       dictionary.p.rapidapi.com/define', {
          params: {
          term: inputValue
          },
          headers: {
          'X-RapidAPI-Key': 'API KEY HERE',
          'X-RapidAPI-Host': 'mashape-community-urban-dictionary.p.rapidapi.com'
        }
        });
        return api2.data;
    }