score:2
it can be done by adding showactive
state in template
class.
add callback function in footer
:
const footer = props => (
<footer>
<a onclick={props.onclick}>newsletter</a>
</footer>
);
instead of setstate
inside, read addclass
from props
:
class newsletter extends component {
render() {
let togglemodal = ["newslettermodal"];
if (this.props.addclass) {
togglemodal.push("active");
}
return (
<div classname={togglemodal.join(" ")}>this part should update!</div>
);
}
}
add an event handler for footer onclick
event:
const header = props => (
<header onclick={props.ontogglemenu}>
<h1>main page title</h1>
</header>
)
class template extends component {
constructor(props) {
super(props);
this.state = {
showactive: false
};
}
toggleclass = () => {
this.setstate(prevstate => ({
showactive: !prevstate.showactive
}));
};
render() {
return (
<main>
<header ontogglemenu={this.toggleclass} />
<newsletter addclass={this.state.showactive} />
<footer onclick={this.toggleclass} />
</main>
);
}
}
note:
if you have multiple components interact with each other, it's better to consider using a state manager, such as redux or mobx
update:
i updated my code, so it can run standalone as a complete demo.
there is the codesandbox demo link
score:0
you need to pass the toggle()
method to your <footer />
component
import react from 'react'
import proptypes from 'prop-types';
import link from 'gatsby-link';
import footer from './footer';
class newsletter extends react.component {
constructor(props) {
super(props);
this.state = {addclass: false}
}
toggle() {
this.setstate({addclass: !this.state.addclass});
}
render() {
let togglemodal = ["newslettermodal"];
if(this.state.addclass) {
togglemodal.push('active');
}
return(
<div classname={togglemodal.join(' ')}>
<div classname="newslettercontainer">
<footer onclick={this.toggle.bind(this)} />
<content />
</div>
</div>
);
}
}
export default newsletter;
in your footer.js file use the onclick function passed in as prop
import react from 'react'
import proptypes from 'prop-types';
import link from 'gatsby-link'
const footer = (props) => (
<footer>
<a onclick={this.props.onclick} href="javascript:;">
newsletter
</a>
</footer>
)
export default footer
Source: stackoverflow.com
Related Query
- Adding a className to <div> onClick <a> in ReactJS
- How to deal with reactjs adding a surrounding div to my component?
- ReactJs onClick add className
- Hide Div onClick when clicking outside the child div | ReactJS
- ReactJS dynamically adding onClick event
- ReactJs adding active class to DIV
- Remove and change className onClick for multiple elements simultaneously - ReactJS
- ReactJS onClick in list item chage div
- DIV onClick Pass Array to Function in ReactJS
- CSS for ReactJS - Referencing a div works fine, referencing a className does not
- Adding div elements in ReactJS
- ReactJS Append div to existing div based on button onClick
- Reactjs component modal onclick div
- How to assign variable id or classname to a div in ReactJS
- ReactJS onClick get DIV IDs
- ReactJs if div contains className set negative tabindex to childrens
- Prevent the onClick on ReactJS if the div contains a specific id
- How to extend div element through onClick in Reactjs
- Call multiple functions onClick ReactJS
- How to conditionally add or not onClick on a div in react?
- TypeScript interface signature for the onClick event in ReactJS
- href with onClick in ReactJS
- tooltip div with ReactJS
- How to get a onClick to work in a row - reactjs
- Best way to disabled DIV onClick in React
- Update Redux prop/state following div onclick
- Reactjs - Adding ref to input in dynamic element render
- How to call multiple functions on the same onClick event ReactJS
- Reactjs animate replace: How to wait for fade out before adding content to fade in?
- "options.allowedHosts[0] should be a non-empty string." when adding proxy to package.json in ReactJS
More Query from same tag
- React - How to add onclick function to buttons in each row in Datatables
- useState value not rendering in DOM
- CSS styling in order to properly align img's the way I want them to on my page?
- Unable to send image attachment to backend
- eslint loader (for webpack 2) - You may need an appropriate loader to handle this file type
- how to filter images from a list of files in django-rest-framework
- Manipulate HTML5 dialog in React
- Correct way to share functions between components in React
- Proper way to package a react component library?
- How to test component on passing object as props?
- SVG fill area under the path only
- How to use highcharts in reactjs with fetched data from API
- How to type a higher order component with flow
- Child components not updating global state
- How to stop re-rendering all Childs in React render function when I change just one child value?
- Is it possible in React to use hooks to fill in individual inputs generated from an array.map()?
- cors c# web API react
- find the next path from the list
- Convert a class component to functional component in react
- React components conditional rendering
- How to center CardHeader title in Material-UI?
- MUI Selection of an Object (MUI: You have provided an out-of-range value)
- Webpack React - component issue
- How to calculate a tic tac toe winner?
- You may need an appropriate loader to handle this file type, currently no loaders are configured import Counter from './components/counter.jsx'
- Filter array of Object values in React chartjs2 dataset
- Why is reat-admin not getting undefined exceptions for not-loaded record (e.g. Poster component)?
- How can I make this more DRY
- Why am I not able to use const/let in React Component?
- Redirection of routes based on condition: React JS