React state value became null when it pass to model

Active3 hr before
Viewed126 times

9 Answers


Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers , Stack Overflow help chat ,Stack Overflow en español

if you use class component in constructor of class you should set default value of state

class SomeComponent extends React.Component {
   constructor(props) {
      this.state = {
         someData: []

if you use functional component you should use react hooks

const SomeComponent = () => {
   const [items, setItems] = useState([]); // default value empty array
load more v

So first, in the updateMocktail method of the App component, we’ll create a constant called newMocktail and assign it the value being passed in for the mocktail.,The updateMocktail method is called on the button element’s onClick event, and the mocktail state is being passed down to the child component Mocktail.,The App component — the parent component — has a mocktail state and an updateMocktail method that handles updating the mocktail.

The folder structure might look like this:

   - > App.js |
   - > Mocktail.js |
   - > index.js |
   - > index.css |
   - > Spinner.js
load more v

With a controlled component, the input’s value is always driven by the React state. While this means you have to type a bit more code, you can now pass the value to other UI elements too, or reset it from other event handlers.,Because its value is read-only, it is an uncontrolled component in React. It is discussed together with other uncontrolled components later in the documentation.,Overall, this makes it so that <input type="text">, <textarea>, and <select> all work very similarly - they all accept a value attribute that you can use to implement a controlled component.

      <input type="text" name="name" />
   <input type="submit" value="Submit" />
load more v

I have a super simple React (Native) component with a static root with a callback ref. When the component is mounted, the callback ref is invoked with the root component. Then when I call setState the callback ref receives null and then the root component again.,The function instance is different so we pass null to the old one and the component to the new one.,Never mind, this is actually right after all (and the same as 0.13). The function instance is different so we pass null to the old one and the component to the new one.

class Example extends React.Component {
  constructor(props, context) {
    super(props, context);
    console.log('in the constructor');

  render() {
    return (
        ref={component => { console.log('got ref', component); }}

  componentDidMount() {
    console.log('in componentDidMount');
load more v

Normally we start with the JSX syntax in React to render some output to the browser. Essentially, JSX is a mix of HTML and JavaScript and tries to get the best out of both these languages.,Let's have a look at the below code where we pass the message from App to HelloReact component:,Let's have a look at our example using a functional component where the props are received as arguments in the function signature, as shown below:

1import React, { Component } from 'react';
2class App extends Component {
3  render() {
4    const hello = 'Say Hello to learning Props/State in React!';
5    return (
6      <div>
7        <h1>{hello}</h1>
8      </div>
9    );
10  }
12export default App;
load more v

Hooks for State and Effects,With React hooks, we have the best of both worlds: clean functional components that can use state -- David Katz,As you would expect we also have an update function for each name so that you can handle changes to them independently.

 Pretag team - issue, fix, solve, resolve

The child component doesn’t know whether the incoming props are state or props from the parent component. The component just consumes the data as props. And the child component re-renders too once the incoming props changed.,Passing only props from component to component doesn’t make the component interactive, because nothing is there to change the props. Props are read-only. That’s the time when React state comes into play which can be changed. The state is co-located to a React component.,This a common question for React beginners and the answer for it is brief: there is no way to pass props from a child to a parent component. Let’s revisit the previous example, but this time with an additional Button component for the toggle mechanism.

 Pretag team - issue, fix, solve, resolve

State allows React components to change their output over time in response to user actions, network responses, and anything else, without violating this rule.,When you setState a prop and use it in your component, you’re breaking the flow of the rendering props. If for some reason the prop passed into your component changed in the parent component, the child will not re-render auto-magically ?!,When you call setState(), React merges the object you provide into the current state.

 Pretag team - issue, fix, solve, resolve

This will only get us the first value, which becomes outdated quickly; in one second. What’s the point of a clock that doesn’t show the current time? Luckily, there’s a way to update the state.,Autobinding means that the function created with a fat arrows will get the current value of this which is, in our case, Clock.,Listing 1: Rendering state in JSX

 Pretag team - issue, fix, solve, resolve

Other "value-state" queries related to "React state value became null when it pass to model"