undefined is not iterable (cannot read property Symbol(Symbol.iterator)) #11756
-
|
I have made a React library using https://tsdx.io & chose the React + TypeScript + Storybook template. The entire code is here → https://github.com/deadcoder0904/react-typical I get this error:
Not sure how I can get rid of it? My storybook file import React from 'react';
import { ReactTypical, Props } from '../src';
export default {
title: 'Basic',
steps: [
'Hey',
5000,
'you',
5000,
'have',
5000,
'a',
5000,
'blessed',
5000,
'day',
],
loop: Infinity,
};
// By passing optional props to this story, you can control the props of the component when
// you consume the story in a test.
export const Default = (props: Props) => <ReactTypical {...props} />;Anyone got any ideas? |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 18 replies
-
|
Fixed your stories: const props = {
steps: [
'Hey',
5000,
'you',
5000,
'have',
5000,
'a',
5000,
'blessed',
5000,
'day',
],
loop: Infinity,
};
export const Default = () => <ReactTypical {...props} />; |
Beta Was this translation helpful? Give feedback.
-
|
And there is a console error. Here's the error:
It looks like it's around my code at type(typicalRef.current as HTMLElement, ...steps);But the code works & the app is also working, only storybook doesn't work. Not sure how to solve this? |
Beta Was this translation helpful? Give feedback.
-
|
The tsdx template looks fine. The part that's buggy is the part you added. |
Beta Was this translation helpful? Give feedback.
-
|
Yeah, any ideas how to solve it? I can't seem to find an answer anywhere sadly :( |
Beta Was this translation helpful? Give feedback.
-
|
You may need to check that the ref exists in your hook. I’d also recommend accepting a ref as a prop instead as part of your component. |
Beta Was this translation helpful? Give feedback.
-
|
Made some progress. I tried putting React.useEffect(() => {
console.log(`React.useEffect`, steps);
if (loop === Infinity) {
console.log(`if`);
type(typicalRef.current as HTMLElement, ...steps, loopedType);
} else if (typeof loop === 'number') {
console.log(`elseif`);
type(
typicalRef.current as HTMLElement,
...Array(loop)
.fill(steps)
.flat()
);
} else {
console.log(`else`);
type(typicalRef.current as HTMLElement, ...steps);
}
}, [typicalRef, loop, steps]);And it logged when I run the React.useEffect ["Creator", 5000, "Entrepreneur", 5000, "Doer", 5000, "Lone Wolf", 5000]
ifBut if I do run it from the storybook, it logs the following: React.useEffect undefined
elseNow I'm pretty sure the Even another prop Here's my storybook code: import React from 'react';
import { ReactTypical, Props } from '../src';
export default {
title: 'Basic',
steps: [
'Hey',
5000,
'you',
5000,
'have',
5000,
'a',
5000,
'blessed',
5000,
'day',
],
loop: Infinity,
};
// By passing optional props to this story, you can control the props of the component when
// you consume the story in a test.
export const Default = (props: Props) => {
console.log(props);
return <ReactTypical {...props} />;
}; |
Beta Was this translation helpful? Give feedback.
-
|
Alright I solved it like this: import React from 'react';
import { ReactTypical, Props } from '../src';
export default {
title: 'Basic',
};
export const Default = (props: Props) => {
return (
<ReactTypical
{...props}
steps={[
'Hey',
500,
'you',
500,
'have',
500,
'a',
500,
'blessed',
500,
'day',
]}
/>
);
}; |
Beta Was this translation helpful? Give feedback.
-
@kylemh @shilman can't blame me, the |
Beta Was this translation helpful? Give feedback.
-
|
@deadcoder0904 no it didn't. I made the example/template. To be clear, I don't doubt you found it somewhere! I want to find it so I can delete it - nobody should have to deal with what you dealt with. |
Beta Was this translation helpful? Give feedback.
-
|
@kylemh so yeah I tweaked that thing only. But I think the example could be more advanced. I thought the Just making the example with 1 more prop would be more clear than that template. As I can see const Greeting = ({ name }) => return `Hello ${name}`So the Storybook example can become the one with props :) |
Beta Was this translation helpful? Give feedback.
-
|
Right, that's what we're trying to explain here. The default export for a Component Story Format (CSF) file does not have keys which represent props - they're strictly reserved for specific keywords. Namely...
|
Beta Was this translation helpful? Give feedback.
-
|
Yeah, that I understand now, but it just wasn't clear to a beginner me yesterday so I'm suggesting an example with 1 prop for other beginners :) |
Beta Was this translation helpful? Give feedback.
Alright I solved it like this: