React PropTypes - How to make a shape optional with its fields required?

Ramon Balthazar

I have a component that receives a badge prop (see example down below). The badge is optional, but once it is used I want it to have some required fields inside it. I've tried the following:

Component.propTypes = {
  badge: PropTypes.shape({
    src: PropTypes.string.isRequired,
    alt: PropTypes.string.isRequired,
  }),
}

It works, but I get this warning on Chrome when trying to use it without the badge:

Warning: Failed prop type: The prop badge.src is marked as required in Component, but its value is null.

What is the proper way of doing this?


Component usage example:

Barack Obama with flag badge={{ src: 'usa.png', alt: 'United States' }}


Barack Obama without flag badge not supplied

Oblosys

This is the correct way to do this. I was very intrigued by how this wouldn't work, so I pasted it in a CodePen (https://codepen.io/Oblosys/pen/xLvxrd) and it works just as expected. (Open a console, and uncomment the failing one to see a prop-type error)

Something else must be going wrong in your code, and at some point you render a Component with a badge property object that has src: null. Maybe before data from an api request has arrived? With some console logging in Component and its parent, you should be able to find the culprit.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How to combine two interfaces and make all of its fields optional?

React PropTypes not showing is required

how to make fields optional? DRF

How to make fields required in CMS

React propTypes: objectOf vs shape?

Gson optional and required fields

Retrofit optional and required fields

Make a field or all fields required in React

How to make optional properties to required based on a condition?

How to make some fields optional in form in flask

How to make some fields optional in Django ORM

How to make Map Optional on whether its every optional value is present

How to make fields appear required (by colouring)

How to make some fields in object required

How to dynamically make an interface key required (or make it optional)

Mongoose: Optional fields marked as required

React Js PropTypes required without type

How To Make Custom Shape In React Native

In Typescript how to make a property required if another optional property is set?

How to make parent value optional and child value required in mongoose

How to make android library uses-permission optional instead of required

Trying to make presence of at least one optional parameter required, but its presence excludes the others

Can you make two versions of an interface, one with all optional and one with all required fields, while staying DRY?

make requestBody fields optional in swaggerUI

How do I make User fields required in Django Rest Framework?

django-rest-framework how to make model serializer fields required

In OpenAPI, how to make some fields of a referenced schema required?

How to make required=false in Django registration custom fields for particular case

How do I make one of the several fields required?

TOP Ranking

  1. 1

    Failed to listen on localhost:8000 (reason: Cannot assign requested address)

  2. 2

    Loopback Error: connect ECONNREFUSED 127.0.0.1:3306 (MAMP)

  3. 3

    How to import an asset in swift using Bundle.main.path() in a react-native native module

  4. 4

    pump.io port in URL

  5. 5

    Compiler error CS0246 (type or namespace not found) on using Ninject in ASP.NET vNext

  6. 6

    BigQuery - concatenate ignoring NULL

  7. 7

    ngClass error (Can't bind ngClass since it isn't a known property of div) in Angular 11.0.3

  8. 8

    ggplotly no applicable method for 'plotly_build' applied to an object of class "NULL" if statements

  9. 9

    Spring Boot JPA PostgreSQL Web App - Internal Authentication Error

  10. 10

    How to remove the extra space from right in a webview?

  11. 11

    java.lang.NullPointerException: Cannot read the array length because "<local3>" is null

  12. 12

    Jquery different data trapped from direct mousedown event and simulation via $(this).trigger('mousedown');

  13. 13

    flutter: dropdown item programmatically unselect problem

  14. 14

    How to use merge windows unallocated space into Ubuntu using GParted?

  15. 15

    Change dd-mm-yyyy date format of dataframe date column to yyyy-mm-dd

  16. 16

    Nuget add packages gives access denied errors

  17. 17

    Svchost high CPU from Microsoft.BingWeather app errors

  18. 18

    Can't pre-populate phone number and message body in SMS link on iPhones when SMS app is not running in the background

  19. 19

    12.04.3--- Dconf Editor won't show com>canonical>unity option

  20. 20

    Any way to remove trailing whitespace *FOR EDITED* lines in Eclipse [for Java]?

  21. 21

    maven-jaxb2-plugin cannot generate classes due to two declarations cause a collision in ObjectFactory class

HotTag

Archive