React Handle Empty Props

React handle empty props

class Current extends React.Component {
  render() {
    const { current } = this.props
    if ( !(current && current.condition) ) return <span>Loading</span>;

    return (
      // Beneath me everything is totaly fine.
      <div className="Current">
        <div className="Important">
          <div>
            <img src={this} alt={this} />
            <span>{this.props.current.temp_c}</span>
          </div>
          <h1>{this.props.location.name}, {this.props.location.country}</h1>
          <p>{this.props.location.localtime}</p>
        </div>
        <h1>hey</h1>
      </div>
    );
  }
}

export default Current;

react this.props undefined or empty object

I believe the issue is as follows. SetState happens asynchronously. Because of this, your render function is firing before the latitude and longitude props have data. If you would have some if check before rendering your Weather component you would likely not have this issue. Here is an example of what I mean.

render() {
    let myComponent;
    if(check if props has val) {
        myComponent = <MyComponent />
    } else {
        myComponent = null
    }
    return (
        <div>
            {myComponent}
        </div>
    )
}

Prop is an empty object in React child

This line is incorrect:

const SearchResult = (addToFavorites, filteredAsset, card, user) => {

You are passing in positional arguments, not named props. Do this instead:

const SearchResult = ({addToFavorites, filteredAsset, card, user}) => {

In your original code, React attaches all of your props as fields on the first argument. So they would be accessible in the child, but not in the way you're trying to access them. Try logging out the values of each of the arguments in the child, if you're curious to see what happens.

The corrected version passes in a single object with field names that match the names of your props. It's shorthand that's equivalent to:

const SearchResult = (
  {
    addToFavorites: addToFavorites, 
    filteredAsset: filteredAsset, 
    card: card, 
    user: user,
  }
) => {

react with ts - check if props empty inside map view.tsx

Use &&. With && operator, second expression is only run when first is true.

     {props.historicPrices.length === 0 && <p>Alert</p> }

If you conditionally want to show one or the other you can use ? conditional operator:

     {props.historicPrices.length === 0 ? <p>Alert</p> : props.historicPrices?.map((price, idx) => {
              return (
                <li className={classes['innerContainer__text']} key={idx}>
                  {t(`historicPrices.currency.${currency}`)}
                  {price.price}
                  {t('historicPrices.date')}
                  {price.createdAt}
                </li>
              )
            })}

Above code returns <p>, when length is 0, otherwise the map function is run and that will be rendered.

Best practice to handle null props in React?

bad, cos somebody else will forget and yell WTF

// App.js
<Hello name={getName() || 'mike'} />

so so, but this is ugly, assign default value is more elegant

// Hello.js
return <div>Hello {name || "mike"}</div>;

better, why not just return string or undefined

function getName(){
  ...
  return something || undefined
}

best, people wont always do so, how to make sure? TypeScript will check it when compile

interface Props {
    name: string;
}
interface State {
    xxx: xxx
}
class Hello extends React.Component<Props, State> {

choose as you like, cos best costs most

React handle empty props

class Current extends React.Component {
  render() {
    const { current } = this.props
    if ( !(current && current.condition) ) return <span>Loading</span>;

    return (
      // Beneath me everything is totaly fine.
      <div className="Current">
        <div className="Important">
          <div>
            <img src={this} alt={this} />
            <span>{this.props.current.temp_c}</span>
          </div>
          <h1>{this.props.location.name}, {this.props.location.country}</h1>
          <p>{this.props.location.localtime}</p>
        </div>
        <h1>hey</h1>
      </div>
    );
  }
}

export default Current;

This.props is empty for some reason (React.js)

First of all you have to expose handler from the Checkbox component,

// CheckBox.js
...
handleCheckBoxClick = () => {
  this.setState({ checkBoxChecked: !this.state.checkBoxChecked });
  this.props.setChecked(this.state.checkBoxChecked)
};
...

Then pass this handler in Forms component

// Forms.js
<CheckBox required setChecked={this.setChecked} />

And then of course, handle it

// Forms.js
setChecked = (checked) => {
  console.log("Checked: ", checked)
}

Moreover you will need to pass options to check handler in Checkbox component to distinguish between the options

onChange={() => this.handleCheckBoxClick('option1')}

but this in case you will need it
anyway it works per your description

---

Related Topics