I'm new to React. As a learning exercise I'm building an chess application
I want to change the DOM of child based on state in parent. Currently there is no change in child components on change of state in parent.
Parent Component
class Game extends Component{
constructor(){
super();
this.state = {
game :{
board_position = { 'One' : ''}
}
}
this.handleClick = this.handleClick.bind(this);
}
handleClick(){
let p = this.state.game.board_position;
// some computations on p
p = { board_position : { 'One' : Math.random() } }
this.setState({
game : p
})
//this.forceUpdate(); // Just trying different methods to make it work
}
render(){
return(
<div onClick={(e) => this.handleClick(e) }>
<Piece {...this.state.game.board_position} />
</div>
)
}
}
Child Component
Class Piece extends Component{
constructor(){
super(props);
this.state = {
clr : ''
}
}
componentWillMount(){
let c;
// some computations that change value of c based on props
if( typeof ( this.props.game.one) == number ){
c = 'Red'
} else {
c = 'Blue'
}
this.setState({
clr : c
})
}
render(){
return(
<span>{this.state.clr}</span>
)
}
}
On call of handle click method, there is a change in state of the game. However, subsequent changes in Child are not seen.
Can anyone please help me out? Where am I going wrong?
I'm not sure how to implement ref as suggested over here. However, I don't think that is a good solution. Probably I'm having some conceptual misunderstanding.
PS: Please ignore any syntax error. This code is a strip down of real code.
If you want to take a look at full code - go over here
componentWillMount in your Piece component will only fire once.
Are you updating your state each time the props change as well ? For example using componentWillReceiveProps
Also you could just display the props directly in your render function
render(){
return(
<span>{use the props directly here}</span>
)
}
Try to avoid using state whenever possible, and stick with just rendering your component based on props.
it's a pretty basic react process:
class Game extends Component{
constructor(){
super();
this.state = {
game :{
board_position = { 'One' : ''}
}
}
this.handleClick = this.handleClick.bind(this);
}
handleClick(e){
let p = this.state.game.board_position;
// some computations on p
p = { board_position : { 'One' : Math.random() } }
this.setState({
game : p
})
}
render(){
return(
<div onClick={this.handleClick}>
<Piece board_position={this.state.game.board_position} />
</div>
)
}
}
Child: //can be a function instead of a class
const Piece = ({board_position}) =>{
const {board_position} = this.props;
let clt = board_position;
//do some stuff
return(
<span>{board_position}</span>
);
};
if you want to do more calculations you can use componentWillReceiveProps(newProps)
A component re render when it's props or states get changed. There will be certain life cycle methods get invoked based on the values of props and own states.
The way you accessed your **props is wrong.**
It should be
this.props.One
Life cycle method you should have used is componentWillReciveProps(nextProps). In that case you should access the relevant prop like below
nextProps.One
I have created a working fiddle (your code had errors if you fixed those and looked at your log you could have easily figure out where the error is)
Related
I change render annotations in my Mapbox every onPress call of one of the data filters buttons, as you see in this code :
import MapboxGL from "#react-native-mapbox-gl/maps";
MapboxGL.setAccessToken("mytoken_workign_fine");
export default class myClass extends Component{
render_annotaions1 = [{.....},{.....},....];
render_annotaions2 = [{.....},{.....},....];
render_annotaions3 = [{.....},{.....},....];
constructor(props) {
super(props);
this.state = {
filter_state: 1,
};
}
press_filter1(){
if(this.state.filter_state != 1){
this.setState({filter_state:1});
}
}
press_filter2(){
if(this.state.filter_state != 2){
this.setState({filter_state:2});
}
}
press_filter3(){
if(this.state.filter_state != 3){
this.setState({filter_state:3});
}
}
getAnnotations(){
switch(this.state.filter_state ){
case 1:return this.render_annotaions1;
case 2:return this.render_annotaions2;
default:return this.render_annotaions3;
}
}
render(){
return (
<MapboxGL.MapView
ref={(c) => (this._map = c)}
style={{ flex: 1 }}
rotateEnabled={false}
logoEnabled={false}
userTrackingMode={1}
pitchEnabled={false}
>
{this.getAnnotations()}
<MapboxGL.Camera
zoomLevel={1.1}
followUserLocation={false}
centerCoordinate={[9, 34]}
/>
</MapboxGL.MapView>);
}
}
now, default annotations ( annotations1 ) is showing well, but when I press on one filter button, no map changing, it keeps default annotations and this is my problem, I want to change set annotations by news assigned annotations returned by getAnnotaions() every
setState()
and
forceUpdate()
call (the both are not working ), please I need help with this problem, and thanks for all.
When using class components in React, you need to bind the methods in the constructor in order to access this. Read here: https://reactjs.org/docs/handling-events.html
constructor(props) {
super(props);
this.state = {
filter_state: 1,
};
this.press_annotation1 = this.press_annotation1.bind(this);
}
You need to do this for each click handler.
I would also recommend using a single click handler that takes in the filter state. Something like:
setFilterState(annotationNumber) {
this.setState({ filter_state: annotationNumber });
}
Lastly, always name your React components with a capital letter.
Problem
I've parent class which contains list of items and renders component for each item of the list. When some item has been changed (even only one), all items in the list are being rerendered.
So I've tried to implement shouldComponentUpdate(). I am using console.log() to see if it is called but I can't see the log. I've found question shouldComponentUpdate is not never called and tried to return return (JSON.stringify(this.props) !=JSON.stringify(nextProps)); but component still renders itself again. So I've tried just to return false (like do not ever update) but it still does. As the last try I've used PureComponent but it is still being rerendered.
Question
How can I stop children re-rendering if the parent list changes and why is ShouldComponentUpdate never called?
Edit
I've noticed something what I didn't mention in question, I'm sorry for that. I am using context. If I don't use context -> it's ok. Is there any chance to stop re-render while using context? (I'm not using context on updated item - values of context didn't change).
Example
I've parent class which iterates list and renders TaskPreview component for each item of list:
class Dashboard extends React.Component
{
constructor(props) {
this.state = {
tasks: {},
};
}
onTaskUpdate=(task)=>
this.setState(prevState => ({
tasks: {...prevState.tasks, [task._id]: task}
}));
// ... some code
render() {
return (
<div>
{(!Object.entries(this.props.tasks).length)
? null
: this.props.tasks.map((task,index) =>
<TaskPreview key={task._id} task={task} onChange={this.onTaskUpdate}/>
})}
</div>
)
}
}
and I've children TaskPreview class:
class TaskPreview extends React.Component
{
shouldComponentUpdate(nextProps) {
console.log('This log is never shown in console');
return false; // just never!
}
render() {
console.log('task rendered:',this.props.task._id); // indicates rerender
return(<div>Something from props</div>);
}
}
TaskPreview.contextType = TasksContext;
export default TaskPreview;
As #Nicolae Maties suggested I've tried to use Object.keys for iteration instead of direct map but it still doesn't call "shouldComponentUpdate" and still being re-rendered even if there is no changes.
Updated code:
render() {
return (
<div>
{(!Object.entries(this.props.tasks).length)
? null
: Object.keys(this.props.tasks).map((key,index) => {
let task = this.props.tasks[key];
<TaskPreview key={task._id} task={task}/>
}
})}
</div>
)
}
Component is being re-rendered because of .contextType.
TaskPreview.contextType = TasksContext;
Also as is mentioned in documentation:
The propagation from Provider to its descendant consumers (including .contextType and useContext) is not subject to the shouldComponentUpdate method, so the consumer is updated even when an ancestor component skips an update. Source: reactjs.org/docs/context
You have to use context somehow else or do not use it at all.
You can use Context.Consumer which won't force re-render of current component but it might force re-render of its children.
<TasksContext.Consumer>
{value => /* render something based on the context value */}
</TasksContext.Consumer>
Instead of return (JSON.stringify(this.props) != JSON.stringify(nextProps)); in your shouldComponentUpdate() life cycle, try specifying tasks object like this return (JSON.stringify(this.props.tasks) != JSON.stringify(nextProps.tasks));
Maybe react is creating new instances of your component and replaces the old instances with them. That's why you're probably not getting your lifecycle method invoked. That can happen if the key property you're assigning in the map always changes.
use from pureComponent and array as state:
class Dashboard extends React.PureComponent
{
constructor(props) {
this.state = {
tasks: this.props.tasks
}
}
onTaskUpdate=(task)=>
this.setState(prevState => ({
tasks: [...prevState.tasks, task] // render only new task
}));
render() {
const {tasks} = this.state
return (
<div>
{tasks.map(task => <TaskPreview key={task._id} task={task} />)}
</div>
)
}
}
class TaskPreview extends React.PureComponent
{
render() {
console.log('task rendered:',this.props.task._id); // indicates rerender
return(<div>Something from props</div>);
}
}
In the shouldComponentUpdate() method of your TaskPreview component, you should check if the next props have changes in comparison to the current props. Then if there are changes, return true to update the component, otherwise false.
The following example compares all the fields of props object with the new props object. But you can only check the props you are interested in.
shouldComponentUpdate(nextProps) {
return !!(Object.keys(nextProps).find(key => nextProps[key] !== this.props[key]));
}
I tried with below code snippet, shouldComponentUpdate worked as I expected. Could you share your Dashboard initial props ?
class Dashboard extends React.Component {
constructor(props) {
this.state = {
tasks: {}
};
}
onTaskUpdate = task =>
this.setState(prevState => ({
tasks: { ...prevState.tasks, [task._id]: task }
}));
// ... some code
render() {
return (
<div>
{!Object.entries(this.props.tasks).length
? null
: Object.keys(this.props.tasks).map((key, index) => {
let task = this.props.tasks[key];
return (
<TaskPreview
key={task._id}
task={task}
onChange={this.onTaskUpdate}
/>
);
})}
</div>
);
}
}
class TaskPreview extends React.Component {
shouldComponentUpdate(nextProps) {
console.log("This log is never shown in console");
return nextProps.task._id != this.props.task._id;
}
render() {
console.log("task rendered:", this.props.task); // indicates rerender
return (
<button onClick={() => this.props.onChange(this.props.task)}>
Something from props
</button>
);
}
}
my initial props for Dashboard component is :
<Dashboard tasks={{test:{_id:'myId', description:'some description'}}}/>
I'm trying to build a component with auto-updating value based on cookies:
let cookies = 0;
(function count() {
cookies = document.cookie.split("?");
setTimeout(count, 10);
return cookies;
})();
class CartButton extends React.Component {
state = {quantity: cookies.length}
render() {
return (
<Cart onClick={e=>{show_cart()}}>
<Mfont>{this.state.quantity}</Mfont>
<Icon>shopping_cart</Icon>
</Cart>
);
}
}
'count' function works as expected, component is rendered with the latest value returned. Unfortunately, it does not auto-update when 'cookies' are changed. It returns this error:
Warning: render(...): Replacing React-rendered children with a new root component. If you intended to update the children of this node, you should instead have the existing children update their state and render the new components instead of calling ReactDOM.render.
I have tried various variations here but still can't figure it out :/
componentDidMount will get execute only once when your component loads first time. This is the correct place to write any logic which we need to execute after page load.
Try this,
class CartButton extends React.Component {
//It is good to have a constructor for the component which has state
constructor(props){
super(props);
this.state = {quantity: cookies.length}
this.updateQuantity;
}
componentDidMount(){
this.updateQuantity = setInterval(()=> {
cookies = document.cookie.split("?");
this.setState({quantity: cookies.length})
},10)
}
//Don't forget to clear any setInterval like below
componentWillUnmount(){
clearInterval(this.updateQuantity);
}
render() {
return (
<Cart onClick={e=>{show_cart()}}>
<Mfont>{this.state.quantity}</Mfont>
<Icon>shopping_cart</Icon>
</Cart>);
}
}
Here your CartButton is not updating even though count is working fine because CartButton is not listening to your cookies variable. React component updates only when there is either props or state change.
You can something like this..
class CartButton extends React.Component {
state = {quantity: cookies.length}
componentDidMount(){
setInterval(function count() {
cookies = document.cookie.split("?");
this.setState({quantity: cookies})
}.bind(this), 10)
}
render() {
return (
<Cart onClick={e=>{show_cart()}}>
<Mfont>{this.state.quantity}</Mfont>
<Icon>shopping_cart</Icon>
</Cart>);
}
}
https://jsfiddle.net/69z2wepo/81913/
I am decorating a component tree and adding some meta data to my components. Works wonderfully at the top level component (A); but if I try and decorate my sub components (commented out but un-commenting illustrates the issue) - the render chain breaks and props that get passed down do not render properly (or at all). Does anyone have any insight - I have attached a fiddle above.
var dec = (t, k, d) => {
console.log('hello decoration')
var el = React.cloneElement(d.value(), {'label': 'my-component-label'})
return {value: () => el}
}
class B extends React.Component{
constructor(props) {
super(props)
}
//#dec
render() {
return <div>
{this.props.data}
</div>
}
}
class A extends React.Component{
constructor(props) {
super(props)
}
#dec
render() {
return <div>
<B data={99 + 101}/>
</div>
}
}
ReactDOM.render(
<A/>,
document.getElementById('container')
);
In order to understand recursion, you must first understand recursion!
That aside, I've used this snippet successfully in the past :
recursiveCloneChildren(children) {
return React.Children.map(children, (child) => {
let childProps = {};
if (!child || !child.props) {
return child;
}
childProps.DECORATED = true;
childProps.children = this.recursiveCloneChildren(child.props.children);
return React.cloneElement(child, childProps);
});
}
Just give it the this.props.children of a Component and it'll do the rest. in this snippet we simply add a DECORATED boolean value to all children.
I have a React component and I want to toggle a css class when clicked.
So I have this:
export class myComponent extends React.Component {
constructor() {
super();
this.state = { clicked: false };
this.handleClick = this.handleClick.bind(this);
}
render() {
return (
<div>
<div onClick={this.clicked}><span ref="btn" className="glyphicon"> </span></div>
</div>
);
}
handleClick() {
this.refs.btn.classList.toggle('active');
}
componentDidMount() {
this.refs.btn.addEventListener('click', this.handleClick);
this.setState({
clicked: this.state.clicked = true,
});
}
componentWillUnmount() {
this.refs.btn.removeEventListener('click', this.handleClick);
this.setState({
clicked: this.state.clicked = false,
});
}
}
This problem is that ESLint keeps telling me "this.refs" is depreciated.
What do I do instead? How can I fix it so it's not using depreciated code?
The Lint rule you are referring to is called no-string-refs and warns you with:
"Using string literals in ref attributes is deprecated (react/no-string-refs)"
You are getting this warning because have implemented the deprecated way of using refs (by using strings). Depending on your React version, you can do:
React 16.3 and later
constructor() {
super();
this.btnRef= React.createRef();
this.state = { clicked: false };
this.handleClick = this.handleClick.bind(this);
}
render() {
return (
<div>
<div onClick={this.addVote}><span ref={this.btnRef} className="glyphicon"> </span></div>
</div>
);
}
React 16.2 and older
constructor() {
super();
this.btnRef; //not necessary to declare the variable here, but I like to make it more visible.
this.state = { clicked: false };
this.handleClick = this.handleClick.bind(this);
}
render() {
return (
<div>
<div onClick={this.addVote}><span ref={(el) => this.btnRef = el} className="glyphicon"> </span></div>
</div>
);
}
For even better readability, you could also do:
render() {
let myRef = (el) => this.btnRef = el;
return (
<div>
<div onClick={this.addVote}><span ref={myRef} className="glyphicon"> </span></div>
</div>
);
}
Have a look at what the official documentation says on Refs and the DOM, and this section in particular:
Legacy API: String Refs
If you worked with React before, you might be
familiar with an older API where the ref attribute is a string, like
"textInput", and the DOM node is accessed as this.refs.textInput. We
advise against it because string refs have some issues, are considered
legacy, and are likely to be removed in one of the future releases. If
you're currently using this.refs.textInput to access refs, we
recommend the callback pattern instead.
The reason this ESLint rule exists is that string Refs are on their way out. However, for the code above I would recommend to not use a Ref in the first place.
Don't Overuse Refs
React's advantage is that it is declarative. Meaning, we have state and an expression (returned JSX) of how the UI (more precisely the DOM) should look given a certain state.
Whatever can be done using just state and UI expression, should be done this way. The problem with the use of a Ref in the code above is that it makes the code imperative. We can't understand how the DOM will look just from the JSX. Here is how you could achieve the same result in a declarative way:
export class myComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
active: false
};
}
handleClick = () => { // with arrow function there is no need for binding.
this.setState(
prevState => {
return {
active: !prevState.active
}
}
)
}
render() {
return (
<div>
<span
onClick={this.handleClick}
className={`glyphicon ${this.state.active && "active"}`}
>
Hello World
</span>
</div>
);
}
}
Refs should be used when state and UI expression aren't enough, and you need access to the actual DOM. For example, focusing on an input field, scrolling to an element, or getting the exact width and height of an element.
If you do use Refs, avoid string refs
String refs harm performance, aren't composable, and are on there way out.
string refs have some issues, are considered legacy, and are likely to
be removed in one of the future releases. [Official React documentation]
[resource1][1], [resource2][1]
Option #1: Use React.createRef
class MyComponent extends Component {
constructor(props) {
super(props)
this.myRef = React.createRef() // create a ref object
}
render() {
return <div ref={this.myRef}></div> // Attach the ref property to a dom element
}
}
Option #2: Use a ref callback
class MyComponent extends Component {
constructor(props){ // Optional, declare a class field
super(props)
this.myRef=null
}
render() {
return <div ref={ (ref) => this.myRef=ref }></div>
} // Attach the dom element to a class field
}
you can try a more declarative way. I changed your code to reflect this. You just need to remind that a component will refresh and call render in every state/props change. So, we can create the class of your element inside render method.
import React from 'react'
export default class myComponent extends React.Component {
constructor() {
super();
this.state = { clicked: false };
this.handleClick = this.handleClick.bind(this);
}
render() {
let btnClass = 'glyphicon'
if(this.state.clicked){
btnClass+=' active'
}
return (
<div>
<div onClick={this.handleClick}><span ref="btn" className={btnClass}> </span></div>
</div>
);
}
handleClick() {
this.setState({
clicked: !this.state.clicked
})
}
}