score:2
Try this
Define a state (bgColor) inside the parent component (Landing) and pass controllers (setBgColor) to the children (buttons).
import { useState } from "react";
const Landing = ( { children }) => {
const [ bgColor, setBgColor ] = useState("blue");
return (
<div className={container} style={{ backgroundColor: bgColor }}>
<div className={wrapper}>
<ZoneButton zone={'pink'} icon={'child'} setBgColor={setBgColor}/>
<ZoneButton zone={'blue'} icon={'code'} setBgColor={setBgColor}/>
</div>
</div>
)
}
set the bgColor
depending on the zone
const ZoneButton = ({ zone, icon }) => {
const colourPrimaryDict = {
'pink': 'var(--pastel-pink-primary)',
'blue': 'var(--pastel-blue-primary)'
}
const colourSecondaryDict = {
'pink': 'var(--pastel-pink-secondary)',
'blue': 'var(--pastel-blue-secondary)'
}
const svgDict = {
'code': <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="code" className="svg-inline--fa fa-code fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M278.9 511.5l-61-17.7c-6.4-1.8-10-8.5-8.2-14.9L346.2 8.7c1.8-6.4 8.5-10 14.9-8.2l61 17.7c6.4 1.8 10 8.5 8.2 14.9L293.8 503.3c-1.9 6.4-8.5 10.1-14.9 8.2zm-114-112.2l43.5-46.4c4.6-4.9 4.3-12.7-.8-17.2L117 256l90.6-79.7c5.1-4.5 5.5-12.3.8-17.2l-43.5-46.4c-4.5-4.8-12.1-5.1-17-.5L3.8 247.2c-5.1 4.7-5.1 12.8 0 17.5l144.1 135.1c4.9 4.6 12.5 4.4 17-.5zm327.2.6l144.1-135.1c5.1-4.7 5.1-12.8 0-17.5L492.1 112.1c-4.8-4.5-12.4-4.3-17 .5L431.6 159c-4.6 4.9-4.3 12.7.8 17.2L523 256l-90.6 79.7c-5.1 4.5-5.5 12.3-.8 17.2l43.5 46.4c4.5 4.9 12.1 5.1 17 .6z"/></svg>,
'child': <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="child" className="svg-inline--fa fa-child fa-w-12" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M120 72c0-39.765 32.235-72 72-72s72 32.235 72 72c0 39.764-32.235 72-72 72s-72-32.236-72-72zm254.627 1.373c-12.496-12.497-32.758-12.497-45.254 0L242.745 160H141.254L54.627 73.373c-12.496-12.497-32.758-12.497-45.254 0-12.497 12.497-12.497 32.758 0 45.255L104 213.254V480c0 17.673 14.327 32 32 32h16c17.673 0 32-14.327 32-32V368h16v112c0 17.673 14.327 32 32 32h16c17.673 0 32-14.327 32-32V213.254l94.627-94.627c12.497-12.497 12.497-32.757 0-45.254z"/></svg>
}
return (
<div className={container} style={{
backgroundColor: colourPrimaryDict[zone],
color: colourSecondaryDict[zone]
}} onClick={() => setBgColor(zone)}>
{svgDict[icon]}
</div>
)
}
You can use this to change the className
if you need.
score:1
You can do something like this:
const ZoneButton = ({ zone, icon }) => {
let [colourPrimaryDict, setColourPrimaryDict] = React.useState({
'pink': 'var(--pastel-pink-primary)',
'blue': 'var(--pastel-blue-primary)'
})
let [colourSecondaryDict, setColourSecondaryDict] = React.useState({
'pink': 'var(--pastel-pink-secondary)',
'blue': 'var(--pastel-blue-secondary)'
})
const svgDict = {
'code': <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="code" className="svg-inline--fa fa-code fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M278.9 511.5l-61-17.7c-6.4-1.8-10-8.5-8.2-14.9L346.2 8.7c1.8-6.4 8.5-10 14.9-8.2l61 17.7c6.4 1.8 10 8.5 8.2 14.9L293.8 503.3c-1.9 6.4-8.5 10.1-14.9 8.2zm-114-112.2l43.5-46.4c4.6-4.9 4.3-12.7-.8-17.2L117 256l90.6-79.7c5.1-4.5 5.5-12.3.8-17.2l-43.5-46.4c-4.5-4.8-12.1-5.1-17-.5L3.8 247.2c-5.1 4.7-5.1 12.8 0 17.5l144.1 135.1c4.9 4.6 12.5 4.4 17-.5zm327.2.6l144.1-135.1c5.1-4.7 5.1-12.8 0-17.5L492.1 112.1c-4.8-4.5-12.4-4.3-17 .5L431.6 159c-4.6 4.9-4.3 12.7.8 17.2L523 256l-90.6 79.7c-5.1 4.5-5.5 12.3-.8 17.2l43.5 46.4c4.5 4.9 12.1 5.1 17 .6z"/></svg>,
'child': <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="child" className="svg-inline--fa fa-child fa-w-12" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M120 72c0-39.765 32.235-72 72-72s72 32.235 72 72c0 39.764-32.235 72-72 72s-72-32.236-72-72zm254.627 1.373c-12.496-12.497-32.758-12.497-45.254 0L242.745 160H141.254L54.627 73.373c-12.496-12.497-32.758-12.497-45.254 0-12.497 12.497-12.497 32.758 0 45.255L104 213.254V480c0 17.673 14.327 32 32 32h16c17.673 0 32-14.327 32-32V368h16v112c0 17.673 14.327 32 32 32h16c17.673 0 32-14.327 32-32V213.254l94.627-94.627c12.497-12.497 12.497-32.757 0-45.254z"/></svg>
}
let changeColor = () => {
//Change your color here
setColourPrimaryDict({
'pink': 'var(--pastel-pink-primary)',
'blue': 'var(--pastel-blue-primary)'
})
}
return (
<div className={container} style={{
backgroundColor: colourPrimaryDict[zone],
color: colourSecondaryDict[zone]
}} onClick={ () => changeColor() }>
{svgDict[icon]}
</div>
)
}
On click just change the state value.
score:1
It is so simple. You just understand what is happening in react for bypassing the props in components. This is a small snippet for better understanding.
Change the passed props state value, which is sent by the parent component or use the redux for global declaration
Parent component
function App() {
const [data, setData] = useState("#fff")
return (
<div style={{
backgroundColor: data
}}>
<Test setData={setData}/>
</div>)
}
Child component
function Test(passedProps) {
let {setData} = passedProps
return (<button onClick={() => setData("#f1f1f1") }>click to change color</button>);
}
Source: stackoverflow.com
Related Query
- How to change the background color of a parent component from inside a child component in react, gatsby
- how to change background color of parent component dynamically from child component
- How can I change the state of a parent component from a child component?
- How do I change the state of the parent component from the child component in Reactjs?
- how to prevent child component from reload when the parent state is change
- How would I change the state in the parent component from the child in React?
- How to access props from Parent Component inside the Child Class Component ? (specifically for componentDidMount)?
- How to set the state of parent component in react from inside child component
- Pass props from a parent component to a child component to control the background color in recharts
- How to change the text color and background color of ant-tooltip component
- How is an argument for a callback in React being passed from the child component to the parent component?
- How to get the ref of a child component inside parent component in ReactJS
- How do I get the Age data from child to parent component
- How to update the correct state value in a parent component that gets its value from a child component using hooks in react?
- How can I change a child's state from the parent component
- How to pass input values from a child Form component to the state of its parent component for submission with react hooks?
- How does the child component receive props from the parent component without listening for the lifecycle method?
- next.js how to change parent state from child component without triggering a button?
- Need Reactjs help on how to properly pass this function from the parent to child button component
- How do I attach multiple event listeners to the same event of a child component from its parent component in React?
- How can I render Parent component again after update from the child component
- How to handle the props from Parent Component to child component to populate props data in the form for updation
- In React, how can a parent component set state from the response an async fetch function performed in a child component?
- Calling a function to change state in parent component from the child component in react
- How to access the state of a child component from a parent class
- How to get the ref from a Mobiscroll child component into the parent
- How to pass info from a child component to a function in the parent component? (REACT NATIVE)
- Not sure how to update parent state from the child component
- how to call a function from child components to parent component(function is in parent) without including the full component
- How do I select all Child Components from my Parent Component and then uncheck a few while retaining the other checked components?
More Query from same tag
- Enzyme, how to find a child of wrapper by attribute?
- value is not updating in useEffect of reactjs hooks?
- React Hook "useAxios" is called in function "onFinish" that is neither a React function component nor a custom React Hook function
- can't import dynamic value inside curly braces - Zero to Mastery React
- How do I enforce passthrough props in TypeScript (in React) when passing a component as prop as well?
- ReactJS animate border or circle based on timer
- Map function won't render new element when state is updated React JS
- Antd calendar change month on day cell click
- Firebase React Native -- how to grab and transmit Device ID/Token?
- Correct implementation of a handler for handleSubmit [React]
- Listen to Formik values changes
- how can I add new item to objects array
- stateless component compare param every time parent rendered
- UseState updates in react without calling set function
- React error in console - Maximum update depth exceeded when input length is more than 5
- migrating php app to react with SSO
- Why does JavaScript render data from the useEffect() hook but fails to render the data when put in the function body?
- Putting Box Inside Circle in Styled Components
- Apollo Client useQuery react hook for GET requests
- Does changing reference of nested object is changing reference to root object?
- Sending BLOB to nodejs API results in empty body on server
- In React is there a more standard way than this of referring to the outer class from within a map?
- How to update the display properly in React?
- Firestore to query by an array's field value
- Do you need to save a file locally before sending it to a mongo db?
- Maximum update depth exceeded
- Unable to render using useState in React.js
- How to style my select options specifically for Firefox?
- React/Redux Form - get ID of input onFocus and set state
- React Table + Searching ARRAY