score:2
you need to bind showstatus in your constructor. the component lifecycle methods are so bound by default.
you need to add a constructor like so:
constructor(props) {
super(props)
this.showstatus = this.showstatus.bind(this);
}
without doing so 'this' will be null in that method.
score:-1
in react you return entire component tree you want to render in the render
method. in your case you return react nodes in the asynchronous callback of click handler. basically they are ignored.
to fix this you need to save network call result like this: this.setstate({myarray: myarray})
and then in render
method you would check if myarray
is present in the state and if present render it.
score:0
i will explain how this work with react, first let's take this example:
import react from "react";
import "./styles.css";
class app extends react.component {
hi(){
console.log("hi")
}
click() {
console.log(this);
this.hi();
}
render() {
return (
<div classname="app">
<h1>hello codesandbox</h1>
<h2>start editing to see some magic happen!</h2>
<button onclick={this.click}>click</button>
</div>
);
}
}
export default app;
here this example will give an error because the click function got different scope then the hi()
function if you try to see console.log(this)
this will return the show global window object so if we do this :
import react from "react";
import "./styles.css";
window.hi = () => {
console.log("hi");
};
class app extends react.component {
click() {
console.log(this);
this.hi();
}
render() {
return (
<div classname="app">
<h1>hello codesandbox</h1>
<h2>start editing to see some magic happen!</h2>
<button onclick={this.click}>click</button>
</div>
);
}
}
export default app;
now it will work because the function click
environment is the global window. in this case this work ok but what if you got to manage component state in your click function here where this will not work because state is only for react.component
and that why you need to bind the click
to the component scope so that it will be able to access react.component methods and you can do this with several ways but i prefer arrow function auto binding like this :
click =()=> {
console.log(this);
this.hi();
}
Source: stackoverflow.com
Related Query
- React gives an error when returning JSON data
- ERROR when fetch JSON data within the Multi-array in React JS?
- React JS Unexpected end of JSON input error when binding data from an API
- React gives Too many renders error when trying to sort data
- React component function returning JSX causes error when used in render method of ES6 class React component
- JSON Error when create react app
- Async await gives syntax error when used in React component
- yarn gives error when creating react application
- Why does data from my api only display once and when I refresh the page it gives an error
- React using react-hook-form - rendering output when no data is available - error map undefined
- "State" undefined when trying to map fetched json data into React app
- How to return json data from 400 error to React from Express?
- File not found error when trying to 'fetch' json in React App
- getting error : fetch errorSyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data in react ajax call
- React - Empty Array When Rendering JSON Data
- Json integer turns string when posting Data .Net Core + React
- pass data to a page within a redirect in React but have error in when read data , How slove?
- Spring Boot Security module gives 403 error when called by using axios from react but works fine in postman
- GraphQL/ React throws Network Error JSON.parse: unexpected character at line 1 column 1 of the JSON data
- Import JSON file in React with data format error
- Generated id in React returning error when using react-portal-toolip
- Error in posting JSON form data to REST api using AJAX in React
- Error while assigning JSON data to variable and accessing it through the state in React
- Error when passing a function in the React data
- I AM HAVING ERROR WHEN TRYING TO MAP A DATA IN REACT . Objects are not valid as a React child (found: object with keys {children}), How do i solve it?
- An error occurred when I get a data from firestore in React app
- Can not access react props data when I try to access it. Getting TypeError error
- React gives me error when I update state based on other state "Too many re-renders. React limits the number of renders to prevent an infinite loop."
- Display JSON Form Validation Error Data in React after a form post request
- Error when binding JSON response into an array - React
More Query from same tag
- React.js to pain HTML: how to convert imageupload.html react code into angular 6 HTML code?
- Resize an image, before uploading to Firebase Storage using Javascript
- Can I Change Box background color on click in material ui with typescript?
- Data cannot be assigned to state in interval function in useEffect
- I have an api call that I need to invoke before the second render after it receive new props
- How do I know if the component the user being navigated to has state navigate('/tsaks/updateTask', { state: {task: data})
- PM2 and nextjs stop responding request after a few uptime
- Unhandled Rejection (Error): The file given is not an image
- WKScriptMessageHandler won't Listen to 'onclick' or 'click' event on a button element on a webpage. The web page is developed using Reactjs
- Why are Animation target values reset when animation ends?
- Warning: Each child in a list should have a unique "key" prop - REMOVE THIS WARNING WITHOUT ALTERING ARRAY
- How do you define a type which could be any subtree of an object recursively?
- material ui: find which component create this tag
- Changing single value state to object state
- Displaying array of data with lat, long as Markers: react-leaflet
- React router redirects me to Hash Router instead of going back to the base url
- Member functions with react hooks
- Server Error SyntaxError: Unexpected token 'export'
- Gatsby - Cannot read property 'childImageSharp' of null
- Redux: Dynamically pass component to Provider
- How to fix Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object
- How to fix "TypeError: this.getElement(...) is null"
- React JS - input onChange event not setting phone number as valid until 1 extra character typed
- How to filter dates from and to a particular date in Reactjs using mui datepicker
- How to get start and end date value in React date range picker?
- How to access JSX component method in React?
- React Change Image Source on Scroll Event
- convert HTML symbol Code to actual symbol using Javascript
- How to extend component style in styled-components
- React.createRef always null