1

I'm new to react and I'm facing a problem in the app I was trying to create. I have three components. So, in the main component, I fetch the data and send the data to the progressbar component, when the progressbar loads, I want to access the function of another component. how do I access the function of the other component?

Main Component

{analysis.tontop.map(({ tone, value }) => (
                    <MyProgressBar
                      onClick={() => this.handleSentClick(tone)} //this is where I want to call the function of the sound component. or is this not the correct place to call the function of the other component?
                      value={value}
                      text={tone}
                      key={tone}
                    />
                  ))}

Progressbar component

const MyProgressBar = ({ value, text, onClick }) => {
  return (
      <ProgressBar
        onClick={onClick}
        max={100}
        now={value}
      />
    </div>
  );
};

The component from where I want to access the function from

function Sound(tone, enteredText) { 

  const handleSentClick = ({ tone, onClick }) => { 
    //this is the function that I want to access in the main component
      console.log('something something');
    };
UbuntuNewb
  • 411
  • 4
  • 13
  • using export and import, or am i mistaken? – Kevin.a Nov 27 '19 at 08:21
  • Are you actually using `Sound` component in `MainComponent`? And can you show a little more code instead so we know how Sound, Progressbar and MainComponent are actually used with eachother? – Ertan Hasani Nov 27 '19 at 08:23
  • @ErtanHasani yeah the sound component is inside mainComponent but the progressbar is in another file which I imported. it's actually a very big app, so I just posted the parts that I thought would be necessary for this question – UbuntuNewb Nov 27 '19 at 08:25
  • i think the function handleSentClick() should be reside in main component class, as you are calling using this operator – Ravi Malviya Nov 27 '19 at 08:25
  • there are some data fetching to be done in the sound component so I placed the handleSentClick function there which will do some action after the data fetching is done. I just added console log here just for some demonstration. – UbuntuNewb Nov 27 '19 at 08:28
  • It's very difficult to picture what you're trying to do without seeing it on a page. In general, components should represent some DOM. If you're trying to use the "play a sound" bit, of a sound component (which may be a button that you don't want on this page), you need to extract that part of the functionality OUT of the sound component and export it in a separate file that both SoundComponent and ProgressBar can make use of. – Ed_ Nov 27 '19 at 08:30
  • try to import using destructure. import {handleSentClick } from "./Sound" in MainComponent. This will allow to to directly use this function – Ayushi Keshri Nov 27 '19 at 08:38
  • @EdHinchliffe my program is such that, when you click the submit button on main component, a progressbar will appear, then when you click on the progressbar, then a function of the sound component should be evoked that plays a sound from the sound component which we receive from an api. I just want to know how to link all those components together or is there any other approach for this workflow? – UbuntuNewb Nov 27 '19 at 09:34

1 Answers1

0

You can't use another components inner function directly since there is no parent - child relation, my suggestion is to use some state management library for that kind of functionality, like redux or mobx which lets you can dispatch functions and retrieve some data from application state via component props. You may check out this article for how to implement redux on existing react project.

Tamer Durgun
  • 401
  • 3
  • 9
  • redux seems way too complicated for my simple app. i just need to play a sound which I will receive from an api in the sound component when I click on a progressbar, that progressbar I will receive when I click the submit button on the main app. as you can see that I have integrated the in the mainComponent, can't I do something similar for the Sound component – UbuntuNewb Nov 27 '19 at 09:38
  • You may seperate the function which you want to call globally then. Create a global functions.js and export sound function from there, then import to any component which do you want to call that function. But i suggest you to use a state management library still, you may choose mobx which is easier to use than redux. Check out for how to create helper functions here: https://stackoverflow.com/questions/33539774/how-to-create-global-helper-function-in-react-native – Tamer Durgun Nov 27 '19 at 12:31