Styjun

Why Faces eat each other?

What can cause an unfrozen indoor copper drain pipe to crack?

Is it a Munchausen Number?

Why are thrust reversers not used to slow down to taxi speeds?

What is a good way to allow only one non null field in an object

How do I minimise waste on a flight?

How did Captain Marvel know where to find these characters?

Add Columns to .csv from Multiple Files

Is it possible to reduce the cost of brewing potions?

Was the Highlands Ranch shooting the 115th mass shooting in the US in 2019

I might have messed up in the 'Future Work' section of my thesis

resoldering copper waste pipe

Which spells are in some way related to shadows or the Shadowfell?

What is the minimum required technology to reanimate someone who has been cryogenically frozen?

My perfect evil overlord plan... or is it?

Is it safe to keep the GPU on 100% utilization for a very long time?

Was Mohammed the most popular first name for boys born in Berlin in 2018?

Why did Missandei say this?

Why is it wrong to *implement* myself a known, published, widely believed to be secure crypto algorithm?

Are on’yomi words loanwords?

How is it possible for this circuit to continue functioning correctly?

Renting a house to a graduate student in my department

Bulk API Error: UNABLE_TO_LOCK_ROW:unable to obtain exclusive access to this record or 124 records

What Firewall Port is required for snap package management?

how to pass state data to other component

ReactJS Two components communicatingPass props to parent component in React.jsCorrect modification of state arrays in ReactJSBest practice for ReactJS form componentsreact-router - pass props to handler componentWhat is the difference between state and props in React?React js onClick can't pass value to methodCan you force a React component to rerender without calling setState?How to conditionally add attributes to React components?How to pass props to this.props.children

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

0

I am new to React. Here is the problem.
when I change the switch state I want to change the theme of whole app.

This is my switch component on the sidebar

constructor() 
 super();
 this.state = checked: false ;
 this.handleChange = this.handleChange.bind(this);
 

 handleChange(checked) 
 this.setState( checked );
 console.log('ddd');
 
 render() 
 return (
 <Switch
 checked=this.state.checked
 onChange=this.handleChange
 onColor='#86d3ff'
 onHandleColor='#0061ac'
 handleDiameter=20
 uncheckedIcon=false
 checkedIcon=false
 boxShadow='0px 1px 5px rgba(0, 0, 0, 0.6)'
 activeBoxShadow='0px 0px 1px 10px rgba(0, 0, 0, 0.2)'
 height=10
 width=30
 className='react-switch'
 id=this.props.id
 />
 );
 

and this is route component that contained by ThemeProvider

<ThemeProvider theme= mode: this.state.checked ? 'dark' : 'light' >
 ...
 </ThemeProvider>

I want to change the whole app theme when I click on the switch. (Sorry for bad English)

reactjs

share|improve this question

edited Mar 23 at 9:01

Leslie Alldridge

607

asked Mar 23 at 7:53

uugan bayaruugan bayar

11

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Use React Context API
  
  – Avinash Mahlawat
  Mar 23 at 8:28
  

  
  
  
  

add a comment | 

0

I am new to React. Here is the problem.
when I change the switch state I want to change the theme of whole app.

This is my switch component on the sidebar

constructor() 
 super();
 this.state = checked: false ;
 this.handleChange = this.handleChange.bind(this);
 

 handleChange(checked) 
 this.setState( checked );
 console.log('ddd');
 
 render() 
 return (
 <Switch
 checked=this.state.checked
 onChange=this.handleChange
 onColor='#86d3ff'
 onHandleColor='#0061ac'
 handleDiameter=20
 uncheckedIcon=false
 checkedIcon=false
 boxShadow='0px 1px 5px rgba(0, 0, 0, 0.6)'
 activeBoxShadow='0px 0px 1px 10px rgba(0, 0, 0, 0.2)'
 height=10
 width=30
 className='react-switch'
 id=this.props.id
 />
 );
 

and this is route component that contained by ThemeProvider

<ThemeProvider theme= mode: this.state.checked ? 'dark' : 'light' >
 ...
 </ThemeProvider>

I want to change the whole app theme when I click on the switch. (Sorry for bad English)

reactjs

share|improve this question

edited Mar 23 at 9:01

Leslie Alldridge

607

asked Mar 23 at 7:53

uugan bayaruugan bayar

11

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Use React Context API
  
  – Avinash Mahlawat
  Mar 23 at 8:28
  

  
  
  
  

add a comment | 

I am new to React. Here is the problem.
when I change the switch state I want to change the theme of whole app.

This is my switch component on the sidebar

constructor() 
 super();
 this.state = checked: false ;
 this.handleChange = this.handleChange.bind(this);
 

 handleChange(checked) 
 this.setState( checked );
 console.log('ddd');
 
 render() 
 return (
 <Switch
 checked=this.state.checked
 onChange=this.handleChange
 onColor='#86d3ff'
 onHandleColor='#0061ac'
 handleDiameter=20
 uncheckedIcon=false
 checkedIcon=false
 boxShadow='0px 1px 5px rgba(0, 0, 0, 0.6)'
 activeBoxShadow='0px 0px 1px 10px rgba(0, 0, 0, 0.2)'
 height=10
 width=30
 className='react-switch'
 id=this.props.id
 />
 );
 

and this is route component that contained by ThemeProvider

<ThemeProvider theme= mode: this.state.checked ? 'dark' : 'light' >
 ...
 </ThemeProvider>

I want to change the whole app theme when I click on the switch. (Sorry for bad English)

reactjs

share|improve this question

edited Mar 23 at 9:01

Leslie Alldridge

607

asked Mar 23 at 7:53

uugan bayaruugan bayar

11

constructor() 
 super();
 this.state = checked: false ;
 this.handleChange = this.handleChange.bind(this);
 

 handleChange(checked) 
 this.setState( checked );
 console.log('ddd');
 
 render() 
 return (
 <Switch
 checked=this.state.checked
 onChange=this.handleChange
 onColor='#86d3ff'
 onHandleColor='#0061ac'
 handleDiameter=20
 uncheckedIcon=false
 checkedIcon=false
 boxShadow='0px 1px 5px rgba(0, 0, 0, 0.6)'
 activeBoxShadow='0px 0px 1px 10px rgba(0, 0, 0, 0.2)'
 height=10
 width=30
 className='react-switch'
 id=this.props.id
 />
 );
 

<ThemeProvider theme= mode: this.state.checked ? 'dark' : 'light' >
 ...
 </ThemeProvider>

share|improve this question

edited Mar 23 at 9:01

Leslie Alldridge

607

asked Mar 23 at 7:53

uugan bayaruugan bayar

11

share|improve this question

edited Mar 23 at 9:01

Leslie Alldridge

607

asked Mar 23 at 7:53

uugan bayaruugan bayar

11

edited Mar 23 at 9:01

Leslie Alldridge

607

edited Mar 23 at 9:01

Leslie Alldridge

607

asked Mar 23 at 7:53

uugan bayaruugan bayar

11

asked Mar 23 at 7:53

uugan bayaruugan bayar

11

2 Answers
2

active

oldest

votes

0

Can you please try

 handleChange(checked) 
 this.setState( checked: true );
 console.log('ddd');
 

As the code here runs on this.state.checked being true or false. Your current code will set the state to be checked:checked instead of checked:true.

If this doesn't help, use React dev tools in your web browser to see what state is doing.

<ThemeProvider theme= mode: this.state.checked ? 'dark' : 'light' >
 ...
 </ThemeProvider>

share|improve this answer

answered Mar 23 at 8:18

Leslie AlldridgeLeslie Alldridge

607

add a comment | 

0

You can put your component state value to the redux store (or use mobx or react Context) which it can be used by other components.

// switch component
handleChange(checked) 
 this.props.appActions.setAppTheme( checked ); // this action will set the value to redux store, you should implement the action and reducer method by yourself


// other component
<ThemeProvider theme= mode: this.props.appState.checked ? 'dark' : 'light' >
 // other component connect to the redux store so it can get the state value
</ThemeProvider>

share|improve this answer

answered Mar 23 at 8:23

zhaozhimingzhaozhiming

401314

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55311767%2fhow-to-pass-state-data-to-other-component%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

Can you please try

 handleChange(checked) 
 this.setState( checked: true );
 console.log('ddd');
 

As the code here runs on this.state.checked being true or false. Your current code will set the state to be checked:checked instead of checked:true.

If this doesn't help, use React dev tools in your web browser to see what state is doing.

<ThemeProvider theme= mode: this.state.checked ? 'dark' : 'light' >
 ...
 </ThemeProvider>

share|improve this answer

answered Mar 23 at 8:18

Leslie AlldridgeLeslie Alldridge

607

add a comment | 

0

Can you please try

 handleChange(checked) 
 this.setState( checked: true );
 console.log('ddd');
 

As the code here runs on this.state.checked being true or false. Your current code will set the state to be checked:checked instead of checked:true.

If this doesn't help, use React dev tools in your web browser to see what state is doing.

<ThemeProvider theme= mode: this.state.checked ? 'dark' : 'light' >
 ...
 </ThemeProvider>

share|improve this answer

answered Mar 23 at 8:18

Leslie AlldridgeLeslie Alldridge

607

add a comment | 

Can you please try

 handleChange(checked) 
 this.setState( checked: true );
 console.log('ddd');
 

As the code here runs on this.state.checked being true or false. Your current code will set the state to be checked:checked instead of checked:true.

If this doesn't help, use React dev tools in your web browser to see what state is doing.

<ThemeProvider theme= mode: this.state.checked ? 'dark' : 'light' >
 ...
 </ThemeProvider>

share|improve this answer

answered Mar 23 at 8:18

Leslie AlldridgeLeslie Alldridge

607

 handleChange(checked) 
 this.setState( checked: true );
 console.log('ddd');
 

<ThemeProvider theme= mode: this.state.checked ? 'dark' : 'light' >
 ...
 </ThemeProvider>

share|improve this answer

answered Mar 23 at 8:18

Leslie AlldridgeLeslie Alldridge

607

answered Mar 23 at 8:18

Leslie AlldridgeLeslie Alldridge

607

answered Mar 23 at 8:18

Leslie AlldridgeLeslie Alldridge

607

0

You can put your component state value to the redux store (or use mobx or react Context) which it can be used by other components.

// switch component
handleChange(checked) 
 this.props.appActions.setAppTheme( checked ); // this action will set the value to redux store, you should implement the action and reducer method by yourself


// other component
<ThemeProvider theme= mode: this.props.appState.checked ? 'dark' : 'light' >
 // other component connect to the redux store so it can get the state value
</ThemeProvider>

share|improve this answer

answered Mar 23 at 8:23

zhaozhimingzhaozhiming

401314

add a comment | 

0

You can put your component state value to the redux store (or use mobx or react Context) which it can be used by other components.

// switch component
handleChange(checked) 
 this.props.appActions.setAppTheme( checked ); // this action will set the value to redux store, you should implement the action and reducer method by yourself


// other component
<ThemeProvider theme= mode: this.props.appState.checked ? 'dark' : 'light' >
 // other component connect to the redux store so it can get the state value
</ThemeProvider>

share|improve this answer

answered Mar 23 at 8:23

zhaozhimingzhaozhiming

401314

add a comment | 

You can put your component state value to the redux store (or use mobx or react Context) which it can be used by other components.

// switch component
handleChange(checked) 
 this.props.appActions.setAppTheme( checked ); // this action will set the value to redux store, you should implement the action and reducer method by yourself


// other component
<ThemeProvider theme= mode: this.props.appState.checked ? 'dark' : 'light' >
 // other component connect to the redux store so it can get the state value
</ThemeProvider>

share|improve this answer

answered Mar 23 at 8:23

zhaozhimingzhaozhiming

401314

// switch component
handleChange(checked) 
 this.props.appActions.setAppTheme( checked ); // this action will set the value to redux store, you should implement the action and reducer method by yourself


// other component
<ThemeProvider theme= mode: this.props.appState.checked ? 'dark' : 'light' >
 // other component connect to the redux store so it can get the state value
</ThemeProvider>

share|improve this answer

answered Mar 23 at 8:23

zhaozhimingzhaozhiming

401314

answered Mar 23 at 8:23

zhaozhimingzhaozhiming

401314

answered Mar 23 at 8:23

zhaozhimingzhaozhiming

401314