How to run function in App.js from another component

Question

I hope you are doing great!

I'm currently new in React.js and I'm bulding my own project but I got to the point that I don't know how to solve it!

I'm trying to create this currency selector embedded on the navbar

I want to know whether is another option or not.

import './Currency.css';

export default function Currency () {
  const options = [
    "COP",
    "USA", 
    "EUR"
  ];

  const [selectedCountry , setSelectedCountry] = useState(options[0]);

  const handlerCargarArticulos = function (e) {
    const opcion = e.target.value;
    console.log(opcion);

    selectedCountry(opcion);
  }

  return (
    <div className="Currency">
      <select className='form__control'
      value={selectedCountry}
      onChange={(e) => setSelectedCountry(e.target.value)}
      onClick = {handlerCargarArticulos}>
        {options.map((option) => (
          <option key={option} value={option}>
            {option}
          </option>
        ))} 
      </select>
    </div>
  );
}

And this is the component that I need to transfer this to

import React, {useState} from 'react';
import './bogota.css';
import Currency from '../Currency/Currency';


const Bogota = () => {
  return (

    <div className="skill__wrapper">
        <table className='table'>
            <thead>
                <tr>
                    <th>Dates</th>
                    <th>Concert</th>
                    <th>Singer</th>
                    <th>Location</th>
                    
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td>May 19th 2022</td>
                    <td>
                    <span className='country__currency'>US </span>
                    $80 + $10</td>
                    <td>Harry Styles</td>
                    <td><a href='https://movistararena.co/en/'>Movistar Arena</a></td>
                    <td><button className='btns'>Buy</button></td>
                </tr>

                <tr>
                    <td>May 31st oct 2022</td>
                    <td><span className='country__currency'>US</span> $50 + 10</td>
                    <td>Dua Lipa</td>
                    <td><a href='https://movistararena.co/en/'>Movistar Arena</a></td>
                    <td><button className='btns'>Buy</button></td>
                    
                </tr>

                <tr>
                    <td>Nov 20st 2022</td>
                    <td><span className='country__currency'>US</span> $100 + $20</td>
                    <td>Motomami</td>
                    <td><a href='https://movistararena.co/en/'>Movistar Arena</a></td>
                    <td><button className='btns'>Buy</button></td>
                </tr>
            </tbody>
        </table>
    </div>
  );
};

**export default Bogota;

**I need to create this selector to choose among the three currencies and eveytime I choose something I want to modified the text in the span located on the previous component

US

**Do you know what is the best way to do it? I just want to create this currency selector, I have three option but I want to select one of those three currencies and I want to have the spans changed as well.

Answer 1

You can do this by 2 ways:

1. First way is to lift up the currency state from Currency component to App.js and share the currency as a props in child components.
2. Second way is you can use useContext hook to share state among different component without prop drilling