I just passed an object in state as below, but the data is not passed in state.
import React from 'react';
export default class Home extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<h2> Home Page </h2>
<Link to='/link2' state={{testing: this.state.JSONData}} target='_blank'>
About
</Link>
</div>
);
}
}
and accessed the state passed in a link as below,
import React from 'react';
export default class About extends React.Component {
constructor(props) {
super(props);
}
render() {
console.log(this.props.location.state.testing);
return (
<div>
<h2> LinPage </h2>
</div>
);
}
}
It returned null.
Related
I'm trying to change the state the a child component but don't change, this is the parent component:
export default class History extends Component {
constructor(props) {
super(props);
this.state = {
histories : JSON.parse(JSON.stringify(histories)),
counter: 1,
id: ''
}
}
increaseCounter = () => {
this.setState({counter: this.state.counter+1})
}
showIdHistory = (id) => {
this.setState(() => {return {id:id}})
}
render() {
return (
<div className="history">
<div>
<h3 className='titleHistory'>{searchHistoryById(this.state.id,this.state.counter)}</h3>
</div>
<div className='options'>
<div className='option'>
<BottonOptionA option='A' increaseCounter={this.increaseCounter} showIdHistory={this.showIdHistory}/>
<h2>{searchOptionById('a',this.state.counter+this.state.id)}</h2>
</div>
<div className='option'>
<BottonOptionB option='B' increaseCounter={this.increaseCounter} showIdHistory={this.showIdHistory}/>
<h2>{searchOptionById('b',this.state.counter+this.state.id)}</h2>
</div>
</div>
<div className='sectionStatics'>
<SelectionBefore optionAnterior={this.state.id}/>
<reacordOfOptions option={this.state.id}/>
</div>
</div>
);
}
}
i want that the parent component pass the state to the component called SelectionBefore but when the parent child changes the state, the props of SelectionBefore still is the same
this is the component child:
import React,{Component} from 'react'
export default class SelectionBefore extends Component {
constructor(props) {
super(props)
this.state = {
optionBefore : props.optionBefore,
}
}
render() {
return (
<div >
<p> Seleccion anterior: {this.state.optionBefore}</p>
</div>
)
}
}
Try following changes :
Child component
import React,{Component} from 'react'
export default class SelectionBefore extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div >
<p> Seleccion anterior: {this.props.optionAnterior}</p>
</div>
)
}
}
I have directly used the props which is passed by parent to the child .
This means that , whenever state of parent changes , your child will rerender and the changes will be shown .
import React from 'react';
import './App.css';
import ChildComponent from './component/childComponent';
class ParentComponent extends React.Component{
constructor(){
super();
this.state = {
isShowLastScrn:false
}
}
render(){
return (
<div className="App">
<childComponent />
</div>
);
}
}
export default ParentComponent;
import React from 'react';
import './childComponent.css';
class ChildComponent extends React.Component{
constructor(props){
super(props);
this.state={
unattempt:0,
}
}
render(){
return(
<div className='wrapper'>
<button type="button" className="btn" onClick={this.props.clickYestBtn}>Yes</button>
<button type="button" className="btn" onClick={this.props.clickNoBtn}>No</button>
</div>
);
}
}
export default ChildComponent;
I am having two buttons on child component. Both buttons have separate click event. How to pass this function from child component to parent component in react js.
Thanks in advance.
Create a reference of child in parent and then you can call easily.
this should work.
import React from 'react';
import './App.css';
import ChildComponent from './component/childComponent';
class ParentComponent extends React.Component{
constructor(){
super();
this.state = {
isShowLastScrn:false
}
}
clickYestBtn=()=>
{
}
clickNoBtn=()=>
{
}
render(){
return (
<div className="App">
<childComponent clickYestBtn={this.clickYestBtn} clickNoBtn={this.clickNoBtn}/>
</div>
);
}
}
export default ParentComponent;
import React from 'react';
import './childComponent.css';
class ChildComponent extends React.Component{
constructor(props){
super(props);
this.state={
unattempt:0,
}
}
render(){
return(
<div className='wrapper'>
<button type="button" className="btn" onClick={this.props.clickYestBtn}>Yes</button>
<button type="button" className="btn" onClick={this.props.clickNoBtn}>No</button>
</div>
);
}
}
export default ChildComponent;
I'm trying to use React Context API to pass props, however I got "undefined" error. The version of react is 16.3.2, and react-dom version is 16.3.2. The following is my code:
Provider.jsx:
import React from 'react';
export const PathContext = React.createContext({
rootPath: "http://localhost/example"
});
App.jsx:
import React from 'react';
import {PathContext} from './Provider.jsx';
class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return(
<div>
<PathContext.Provider>
<AppRootPath />
</PathContext.Provider>
</div>
)
}
}
class AppRootPath extends React.Component {
render() {
return(
<div>
<span>App Root Path</span><br />
<PathContext.Consumer>
{
({rootPath}) => <span>{rootPath}</span>
}
</PathContext.Consumer>
</div>
)
}
}
export default App;
I can't find any problems in here, but the console reports this error: TypeError: Cannot read property 'rootPath' of undefined, and the error happens in here: ({rootPath}) => <span>{rootPath}</span>
About using a default value:
If there is no Provider for this context above, the value argument
will be equal to the defaultValue that was passed to createContext().
But you are wrapping it with Provider. Try removing Provider:
class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return(
<div>
<AppRootPath />
</div>
)
}
}
class AppRootPath extends React.Component {
render() {
return(
<div>
<span>App Root Path</span><br />
<PathContext.Consumer>
{
({rootPath}) => <span>{rootPath}</span>
}
</PathContext.Consumer>
</div>
)
}
}
I'm trying to change the state of one component from another component and my state is not updating, I'm sending back the prop i want to update in my app component but this.setState doesnt work
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import Header from './components/Header';
class App extends Component{
constructor(){
super();
this.state = {
homeLink: "Home"
}
}
onChangeLink(newLink){
this.setState({
homeLink: newLink
});
}
render(){
var user = {
name: "sadf"
}
return(
<div className="container">
<div className="row">
<Header changeLink={this.onChangeLink.bind(this)}/>
</div>
</div>
);
}
}
ReactDOM.render(
<App />,document.getElementById('app')
And here is my header component
import React, {Component} from 'react';
class Header extends Component{
constructor(){
super();
this.state = {
homeLink: 'New Link'
}
}
onChangeLink(){
this.props.changeLink(this.state.homeLink);
}
render(){
return(
<nav className="navbar navbar-default">
<button onClick={this.onChangeLink.bind(this)}>Change Link</button>
</nav>
)
}
}
export default Header
Try something like this:
let newPropValues = {
root: event.target.value
};
this.setState(Object.assign({}, this.state, newPropValues));
I dont know what i am doing wrong in this code, the prop value 'number' is not updating on front end , although in the console logs it value does get increament.
import React from 'react';
import { render } from 'react-dom';
class Parent extends React.Component{
constructor(props){
super(props);
this.number=0;
this.changeValue=this.changeValue.bind(this);
}
changeValue(){
console.log('-------------this.number',this.number);
this.number=this.number+1;
}
render(){
return(
<div>
<Child callMe={this.changeValue} increaseNo={this.number}></Child>
</div>
)
}
}
class Child extends React.Component{
render(){
return(
<div>
<button onClick={this.props.callMe}>CLick Me</button>
<h1>{this.props.increaseNo}</h1>
</div>
)
}
}
render(<Parent/> , document.getElementById('root'));
You have to store this.number inside the component state, the component will only be re-rendered if its state changes or it receives new props.
class Parent extends React.Component{
constructor(props){
super(props);
this.state = {
number: 0
}
this.changeValue=this.changeValue.bind(this);
}
changeValue(){
this.setState({number: this.state.number + 1});
}
render(){
return(
<div>
<Child callMe={this.changeValue} increaseNo={this.state.number}></Child>
</div>
)
}
}
class Child extends React.Component{
render(){
return(
<div>
<button onClick={this.props.callMe}>CLick Me</button>
<h1>{this.props.increaseNo}</h1>
</div>
)
}
}
jsfiddle