Implementing a Button Click Event Listener on a Separate Component in React

Question

Implementing a Button Click Event Listener on a Separate Component in React

Currently, my React application incorporates MapBox in which the navbar is its parent component. Within the navbar component, there is a button that collapses the navbar when clicked by changing its CSS class. I also want to trigger the following code snippet within the map component when this button is pressed:

map.easeTo({
padding: {left:300},
duration: 1000
});

I believe that utilizing the addEventListener() function might be the solution, but the challenge lies in the fact that the navbar and map are distinct components residing in separate JavaScript files.

Your assistance on resolving this issue would be greatly appreciated.

javascript reactjs mapbox addeventlistener mapbox-gl-js

Answer 1

Answer №1

Group both elements within a parent container that manages the navigation bar state, and then pass this state along with its setter function to each child component. Alternatively, you could utilize context for this purpose, but at this level of nesting it may be excessive.

For instance:

const Layout = () => {
  const [isExpanded, setIsExpanded] = useState(false);

  return (
    <>
      <Navbar isExpanded={isExpanded} setIsExpanded={setIsExpanded} />
      <Map isExpanded={isExpanded} setIsExpanded={setIsExpanded} />
    </>
  )
}

Answer 2

Group both elements within a parent container that manages the navigation bar state, and then pass this state along with its setter function to each child component. Alternatively, you could utilize context for this purpose, but at this level of nesting it may be excessive.

For instance:

const Layout = () => {
  const [isExpanded, setIsExpanded] = useState(false);

  return (
    <>
      <Navbar isExpanded={isExpanded} setIsExpanded={setIsExpanded} />
      <Map isExpanded={isExpanded} setIsExpanded={setIsExpanded} />
    </>
  )
}

Implementing a Button Click Event Listener on a Separate Component in React

Answer №1

Similar questions

Tips for accessing jQuery UI tab elements and adjusting visibility for specific panels

Securing a Single Page Application with its own dedicated API to prevent Cross-Site Request Forgery

Unraveling the mystery of decoding a jwt token

The compilation of the module has encountered an error with the PostCSS loader. There is a SyntaxError at line 2, character 14 indicating an unknown

Using Node.js and the Jade templating engine, display the value of a passed variable

potential issues with memory leakage and browser crashes in three.js

Ways to access local JSON data using fetch API

Node.js server experiencing delays due to V8 processing constraints

Tips for updating model data when integrating jQuery Data tables with ASP.NET MVC

Video Autoplay within an image carousel - A seamless integration

"Incorporating splice in a for loop is causing issues and not functioning

I need to figure out a way to validate form data dynamically as the number of fields constantly changes. My form data is being sent via Ajax

Dealing with multipart/form-data in Express using cloud functions in the upcoming year of 2022

Incorporating AJAX in jQuery mobile to transmit data to a controller in CodeIgniter

Exploring various data promises in AngularUI router

Mapping API for JavaScript, converting coordinates into precise locations

Embedding a YouTube video in an iframe triggers numerous cautionary notifications in the Chrome browser

Getting the location of a mouse click and adding tags (marks) on an image: a simple guide

What is the best way to transfer data from a clicked table row to another component?

Using VueJS Computed Property along with Lodash Debounce