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));
Related
import React from 'react';
import './App.css';
import SearchBar from '../SearchBar/SearchBar';
import SearchResult from '../SearchResult/SearchResult';
import PlayList from '../PlayList/PlayList';
class App extends React.Component {
constructor(props) {
super(props)
this.state = {searchResult: [{name: 'The Real Slim Shady', album: 'Marshal Matters LP', artist: 'Eminem', id: 1},
{name: 'Shizzle', album: 'My Dizzle', artist: 'Snoop Dogg', id: 1}]
}
}
render() {
return (
<div>
<h1>Ja<span className="highlight">mmm</span>ing</h1>
<div className="App">
<SearchBar />
<div className="App-playlist">
<SearchResult searchResult={this.state.searchResult} />
<PlayList />
</div>
</div>
</div>
);
}
}
export default App;
--------------------------------------------------------------------------
import React from 'react';
import './SearchResult.css';
import TrackList from '../TrackList/TrackList'
class SearchResult extends React.Component {
render() {
return (
<div className="SearchResults">
<h2>Results</h2>
<TrackList tracks={this.props.searchResult} />
</div>
)
}
}
export default SearchResult;
-------------------------------------------------------------------
import React from 'react';
import './TrackList.css';
import Track from '../Track/Track';
class TrackList extends React.Component {
render() {
return (
<div className="TrackList">
{this.props.tracks.map(track => {
return <Track key={track.id} track={track} />
})}
</div>
)
}
}
export default TrackList;
So I'm passing the state to a child element and than I'm trying to render it as props and I'm getting an error.
Error: Objects are not valid as a React child (found: object with keys {name, album, artist, id}). If you meant to render a collection of children, use an array instead.
I'm lost and there are couple similar problems on Google but I can't work it out. Pls Help.
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 am getting an "TypeError: this is undefined" error even after I am binding this to the function in the constructor. I have also tried to use handleChange={this.handlChange.bind(this)} instead of this.handleChange = this.handleChange.bind(this) but it doesn't work. I am watching React tutorial and I wrote the same code as the tutor did, the code is working fine in his IDE but is showing error in mine.
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
App.js
import React from 'react';
import './css/App.css';
import Header from "./components/Header"
import MainContent from "./components/MainContent"
import Footer from "./components/Footer"
class App extends React.Component {
render(){
return (
<div>
<Header />
<MainContent />
<Footer />
</div>
)
}
}
export default App;
MainContent.js
import React, {Component} from "react"
import ListItem from "./ListItem"
import tasks from "./tasks"
class MainContent extends Component
{
constructor()
{
super()
this.state =
{
tasks: tasks
}
this.handleChange = this.handleChange.bind(this);
}
handleChange(completed)
{
alert(completed)
}
render()
{
const taskComponents = this.state.tasks.map(function(data)
{
return <ListItem key={data.id} task={data.task} completed={data.completed} handleChange={this.handleChange} />
})
return (
<div>
{taskComponents}
</div>
)
}
}
ListItem.js
import React from "react"
let i=1;
class ListItem extends React.Component
{
render()
{
return (
<div>
<p style={{color : i%2 ? "black" : "orange"}}>
<input type="checkbox" checked={this.props.completed}
onChange={function(){
this.props.handleChange(this.props.completed)
}}>
</input> Task {i++} : <b>{this.props.task}</b>
</p>
</div>
)
}
}
export default ListItem
I want to change the state of the component A from an onClick handler of a button that is located in the component B, I currently have my code like this:
Component A:
import React, { Component } from 'react'
import ComponentB from './component_b'
class ComponentA extends Component{
constructor(props){
super(props);
this.state=({
allergies11:'',
allergies12:'',
allergies13:'',
allergies14:''
})
this.onCCDSubmit = this.onCCDSubmit.bind(this);
}
onCCDSubmit(e){
e.preventDefault()
this.setState({
allergies11:'Penicillin',
allergies12:'2/13/10',
allergies13:'Hives',
allergies14:'moderate'
})
this.on
}
render(){
return(
<div>{this.state.allergies11} {this.state.allergies12} {this.state.allergies13} {this.state.allergies14}
<ComponentB />
<div>
)
}
}
export default ComponentA;
Component B:
import React, { Component } from 'react';
class ComponentB extends Component{
render(){
return(
<button type="button" onClick={this.onCCDSubmit}>Import</button>
)
}
}
export default ComponentB;
how can i achieved this, any help is welcome!
You can pass a callback to your Component B, which would trigger the callback upon click...
Component B:
import React, { Component } from 'react';
class ComponentB extends Component{
render(){
return(
<button type="button" onClick={this.props.clickHandler}>Import</button>
)
}
}
export default ComponentB;
Component A:
import React, { Component } from 'react'
import ComponentB from './component_b'
class ComponentA extends Component{
constructor() {
super();
this.handleClickB = this.handleClickB.bind(this);
}
handleClickB(e) {
e.stopPropagation();
this.setState({
// new state you want to set...
});
}
render(){
return(
<div>{this.state.allergies11} {this.state.allergies12} {this.state.allergies13} {this.state.allergies14}
<ComponentB clickHandler={this.handleClickB} />
<div>
)
}
}
export default ComponentA;
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.