Why React Props Are Passed Undefined to the Child Component

why react props are passed undefined to the child component?

Because you have async request and when Header is being mounted you don't have this data yet.

Try this:

   render(){
        const article = this.state.article
        const team = this.state.team

        if(!article && !article.date && !article.author) {
          return null;
        }

        if(!team) {
          return null;
        }

        return(
            <div>
                 <Header
                    teamData={ team }
                    date={ article.date }
                    author={ article.author }
                    />
                { JSON.stringify(article,team) }
            </div>
        )
    }

React props passed to child are undefined

Did you try to change disabled to disableBtn in your component declaration:

<CustomSaveAll 
       disabledBtn={disabledBtn}
       classes={classes.button}
  />

Props is undefined when passed to a child component (react hooks)

The problem is that you are using return inside map.
Look how I did it:

1- We don't need the function showSelectedDay so I remove it.

2- We don't need the state const [activeItem, setActiveItem] = useState("");.

3- Add new state const [dayTrainings, setDayTrainings] = useState([]);

4- Update handleItemClick to:

  const [dayTrainings, setDayTrainings] = useState([]);
  const handleItemClick = (e) => {
    days.forEach((element, index) => {
      if (e.target.name === element.id) {
        console.log("selected day is " + element.date);
        setDayTrainings(element.dayTrainings);
      } else {
        console.log("not selected, day id is " + element.id);
      }
    });
  };

5- In the render return:

      {dayTrainings.length > 0 && (
        <ScheduledTrainingCard
          dayTraining={dayTrainings}
        ></ScheduledTrainingCard>
      )

Example of ScheduledTrainingCard:

export default function scheduledTrainingCard(props) {
  console.log(props.dayTraining);
  return (<>
      {
        props.dayTraining.map((item, index) => 
        <p key={index}>
          {item['time']}<br/>
          {item['training']}<br/>
          {item['trainer']}<br/>
          <br/><br/>
        </p>)
      }
    </>);
}

Example of output:
output

react prop is undefined in child component

Issue

Credit to Yoshi for calling it out first, but there is an issue with the way you navigate from your home page to the book details page. Mutating the window.location.href object will actually reload the page, and your app. Since React state lives in memory it is lost upon page reloading.

Solution

Use the history object provided by the Router context to PUSH to the new route. Since you are already using a function component you can import the useHistory React hook from react-router-dom and issue the imperative navigation.

import { useHistory } from 'react-router-dom';

...

const Books = ({ books, onBookSelect }) => {
  const history = useHistory(); // <-- access the history object from hook

  const sendBookId = (e) => {
    const bookId = e.target.value;
    onBookSelect(bookId);
    history.push("/details"); // <-- issue PUSH to route
  };

  return (
    <div>
      <div className="books">
        Books
        {books.map((book) => (
          <div className="book">
            <h2>{book.name}</h2>
            <p>
              Author: <a href="#">{book.author}</a>
            </p>
            <button className="btn" value={book.id} onClick={sendBookId}>
              View Details
            </button>
          </div>
        ))}
      </div>
    </div>
  );
};

React.js - child component props undefined

The typeOf data in Child component is not an Array, its an object and .map is an array function, hence the error. Check and log variable data instead.

One of the ways to iterate an object is below

Object.keys(data).map(function(keyName, keyIndex) {
  ...
})

React props value is undefined

To avoid your problem, you shouldn't be rendering your Child component until the this.state.tags has any useful values.

Here is how you can do it and also show a "Loading..." text, so the user isn't worried the page is broken.

class Parent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            tags: [],
        };
    }
    componentDidMount() {
        this.getTags();
    }

    getTags() {
        //method gets tags from the backend
    }
    render() {
        return this.state.tags.length ? (
            'Loading...'
        ) : (
            <Child tags={this.state.tags} />
        );
    }
}

Props turns out to be undefined in Reactjs

What you need to do is to change submitTodoHandler function in your <Form> component:

submitTodoHandler = (e) => {
    e.preventDefault();
    console.log(this.props.inputText) // outputs what you typed in the input
    this.props.setTodos(this.props.inputText);
  };

You define setState in functional component and pass it as a prop to class component. setState hook in functional components behaves slightly different from setState in class components, which you are referencing to.

In functional components setState (or setTodos in your case) changes the state of the variable simply by using setState(newVariableValue) and accepts as a parameter previous state. As newVariableValue is passed with a prop (inputText) from <App> component to <Form> component, you can directly access it with this.props.inputText.

Using the State Hook

React js this.props.variable is undefined in child Component

The problem is that you are using an undefined minDate value when instantiating jQuery date picker.

Here's what is happening to the value of minDate:

Parent component sets the value of minDate to an empty string because it's defined so in the getInitialState method.

Parent component sets the value of minDate to the value of the response variable (probably undefined but I can't be sure as there is no other information to what the value of response is).

Child component takes the value of this.props.minDate when the child is mounted. At this point the value of this.props.minDate is either an empty string or undefined.

Finally jQuery date picker is then given the value of this.props.minDate in the componentDidMount method. The jQuery date picker is only instantiated once, so if the value of this.props.minDate changes over time it is not re-evaluated by the jQuery date picker.

---

Related Topics