How Can I implement a function into another different component?

Question

I'm trying to bind the state with a select option.

It is like a Currency dropdown menu selector and I want to choose one of the option from the header but I want to apply this option also a a text.

Like selecting the option and then getting the same option in the section text below.

But I'm getting an error "currencystate is not defined"

This is my main file:


function Currency (props) {
   const [currencyState, setCurrencyState] = useState("");

 return (
   <div>
     <select className="custom-select" onChange={(e) => {
       const selectedCountry= e.target.value;
       setCurrencyState(selectedCountry);
     }}>
       <option value="COP">COP</option>
       <option value="USA">USA</option>
       <option value="EUR">EUR</option>
     </select> 
   </div>
 );
}

export default Currency;

And this is where I want to apply the effect:

import React from 'react';
import './bogota.css';

function Bogota (props) {


  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 {currencyState} 
                    </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>
  );
};

How I can do the process?

You need to share the state between 2 components. Check this one out https://stackoverflow.com/questions/38901106/how-to-make-a-shared-state-between-two-react-components — Eugene, Jun 06 '22 at 15:12
Your `Currency` component contains *inside* the state for the selected currency, but doesn't provide any way for the "outside" to use that information. IMHO for your use-case it *may* be that using a `Context` is semantically the best option, since it is defined for sharing a little bit of state between sections of your application which are not necessarily parent/child (e.g. you have your currency/language selector in the settings page), if you have more complex shared state something like redux is needed. — GACy20, Jun 06 '22 at 15:14

score 0 · Answer 1 · answered Jun 06 '22 at 15:41

As mentioned in one of the comments above, you can use context API or redux to achieve this the way you want. Otherwise, you could change your solution by moving the state and Currency component to the Bogota component.

import React, { useState } from "react";
import Currency from "./Currency";

function Bogota() {
  const [currencyState, setCurrencyState] = useState("");

  const handleCurrency = (val) => {
    setCurrencyState(val);
  };

  return (
    <div className="skill__wrapper">
      <Currency handleCurrency={handleCurrency} />
      <table className="table">
        ...
      </table>
    </div>
  );
}

export default Bogota;

And then the Currency component looks like so:

function Currency({ handleCurrency }) {
  return (
    <>
      <div>
        <select
          className="custom-select"
          onChange={(e) => {
            const selectedCountry = e.target.value;
            handleCurrency(selectedCountry);
          }}
        >
          <option value="COP">COP</option>
          <option value="USA">USA</option>
          <option value="EUR">EUR</option>
        </select>
      </div>
    </>
  );
}

export default Currency;

Hi Sebastian thank you so much for this! I'm currently having a problem because I receive this error message in the console: "handleCurrency is not a function" which I don't know why is appearing. And the text in span is not changing depending in the option selected within the selector — Ricardo Sánchez, Jun 06 '22 at 18:52
Did you add the `handleCurrency` method in the same way as I did? Did you pass this method to the `Currency` component? — sebastian.zawolanski, Jun 07 '22 at 10:17

How Can I implement a function into another different component?

1 Answers1