CODEWITHSUNDEEP
reactjs
user3378165
user3378165

Reputation: 6896

Property value expected type of string but got null

I have an Icon.jsx component:

import React from 'react'; import { css } from 'emotion';

import ArrowRight from "./arrow-right.svg";

export const iconTypes = {
    arrowRight: 'ARROW_RIGHT',
    //arrowLeft: "ARROW_LEFT", }

const iconSrc = {
    ARROW_RIGHT: ArrowRight,
    ARROW_LEFT: ArrowLeft, }


export default ({ type }) => {
    return (
        <Icon>
            <img src={iconSrc[type]} />
        </Icon>
    )
};

And an `Icon.jsx' story:

import React from "react";
import { storiesOf } from "@storybook/react";
import { action } from "@storybook/addon-actions";
import Icon from "../components/Icon/Index";
import { iconTypes } from "../components/Icon/Index";


storiesOf("Icon", module)
    .add("with text", () => (
        <Icon type={iconTypes.leftArrow}>
            </Icon>
    ));

I keep getting the following error on the Icon.jxs component:

 Property value expected type of string but got null

But I can't figure it out, any help would be much appreciated.

Upvotes: 0

Views: 2830

Answers (2)

user3378165
user3378165

Reputation: 6896

The issue was do to the ES6 syntax, that works fine:

export default function Icon({ type }) {
    return (
        <div>
            <img src={iconSrc[type]} />
        </div>
    )
};

Upvotes: 1

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

You're using leftArrow in <Icon type={iconTypes.leftArrow}></Icon> which is not defined and thus type={undefined} and passing undefined or null will cause you the error as you've specified.

Property value expected type of string but got null

The fix is to use defined type of arrow:

<Icon type={iconTypes.ARROW_LEFT}></Icon>

Upvotes: 0

Related Questions