You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
In the "Create/Edit" section of the State Manager, you can declare a new state variable. First make sure that you have selected the correct component on the left. This new state variable will be created inside the component highlighted with a red dot (as shown below).
38
-
<br/><br/>You can create your state variable with a key, an intial value, and a type (ex: string, number, boolean, etc).<br/><br/>
39
-
<divclassName={classes.imgWrapper}>
40
-
<imgclassName={classes.medImg}src={createState}/>
41
-
</div>
42
-
<br/><br/>
43
-
You will now see your new state variable in the "Current Component State" table. Also, you can see the React Hook that has been created for this state variable.
44
-
<br/><br/>
45
-
<divclassName={classes.imgWrapper}>
46
-
<imgwidth="600"src={table1}/>
47
-
</div>
48
-
</p>
49
-
<h2>Step 3: Pass in Props from Parent Component</h2>
50
-
<pclassName={classes.text}>
51
-
In the "Create/Edit" section of the State Manager, you can also view props available from the parent component. You can choose to import any of the state variables, with or without their associated React Hooks.
52
-
<br/><br/>Just click the plus sign next to the state you want to import into the current component. This will automatically update the "Passed In Props from Parent" table on the far right.<br/><br/>
53
-
<divclassName={classes.imgWrapper}>
54
-
<imgwidth="1100"src={table3}/>
55
-
</div>
56
-
</p>
57
-
<h2>Step 4: Delete Any Unnecessary State Variables</h2>
58
-
<pclassName={classes.text}>
59
-
If there are any state variables you want to delete, you can do so in the "Create/Edit" tab!
60
-
<br/><br/>You can delete a state variable that was created in the current component by clicking the X next to it in the "Current Component State" table. <br/><br/>
61
-
You can also delete state from the "Passed In Props From Parent" table. This will delete the passed in props from the current component, but won't delete the original state variable inside the parent component.
62
-
<br/><br/>
63
-
For example, in the gif below, we can see the "num" state variable being deleted from the component "Row". Its associated React Hook is also automatically deleted.
64
-
<br/><br/>
65
-
Then, the "setDarkMode" React Hook is deleted from "Passed In Props From Parent: App". However, if we click over to the "App" parent component, the "setDarkMode" React Hook is still available.
66
-
<br/><br/>
67
-
<divclassName={classes.imgWrapper}>
68
-
<imgwidth="1300"src={deleteState2}/>
69
-
</div>
70
-
</p>
71
-
<br/><br/>
72
-
<h2>Step 5: Visualize the State Flow of Your Prototype Application</h2>
73
-
<pclassName={classes.text}>
74
-
Once you've added all your state variables to your components, you can click on the "Display" section of the State Manager. Here, you can see a tree diagram that shows the relationship between the components you have created. Click on each component to see its state variables -- including passed in props! <br/><br/>
75
-
On the left side of the screen, click on other root components (if using Classic React) or pages (if using Next.js or GatsbyJS) to see their tree diagrams too.
76
-
<br/><br/>
77
-
<divclassName={classes.imgWrapper}>
78
-
<imgwidth="1400"src={display}/>
79
-
</div>
80
-
<br/><br/>
81
-
Created state variables and React Hooks will also be visible in the <spanclassName={classes.notLink}onClick={()=>setPage('Code Preview')}>code preview</span>.<br/><br/>
82
-
You can see below that the "num" and its associated React Hook have been passed in to the "Row" component from its parent component.
83
-
<br/><br/>
84
-
On line 10, the state variable "darkMode" has been passed into the "Row" component from its parent, but without its React Hook, since we chose not to pass the hook down from the parent component.
In the "Create/Edit" section of the State Manager, you can declare a new state variable. First make sure that you have selected the correct component on the left. This new state variable will be created inside the component highlighted with a red dot (as shown below).
38
+
<br/><br/>You can create your state variable with a key, an intial value, and a type (ex: string, number, boolean, etc).<br/><br/>
39
+
<divclassName={classes.imgWrapper}>
40
+
<imgclassName={classes.medImg}src={createState}/>
41
+
</div>
42
+
<br/><br/>
43
+
You will now see your new state variable in the "Current Component State" table. Also, you can see the React Hook that has been created for this state variable.
44
+
<br/><br/>
45
+
<divclassName={classes.imgWrapper}>
46
+
<imgwidth="600"src={table1}/>
91
47
</div>
92
-
);
93
-
};
48
+
</p>
49
+
<h2>Step 3: Pass in Props from Parent Component</h2>
50
+
<pclassName={classes.text}>
51
+
In the "Create/Edit" section of the State Manager, you can also view props available from the parent component. You can choose to import any of the state variables, with or without their associated React Hooks.
52
+
<br/><br/>Just click the plus sign next to the state you want to import into the current component. This will automatically update the "Passed In Props from Parent" table on the far right.<br/><br/>
53
+
<divclassName={classes.imgWrapper}>
54
+
<imgwidth="1100"src={table3}/>
55
+
</div>
56
+
</p>
57
+
<h2>Step 4: Delete Any Unnecessary State Variables</h2>
58
+
<pclassName={classes.text}>
59
+
If there are any state variables you want to delete, you can do so in the "Create/Edit" tab!
60
+
<br/><br/>You can delete a state variable that was created in the current component by clicking the X next to it in the "Current Component State" table. <br/><br/>
61
+
You can also delete state from the "Passed In Props From Parent" table. This will delete the passed in props from the current component, but won't delete the original state variable inside the parent component.
62
+
<br/><br/>
63
+
For example, in the gif below, we can see the "num" state variable being deleted from the component "Row". Its associated React Hook is also automatically deleted.
64
+
<br/><br/>
65
+
Then, the "setDarkMode" React Hook is deleted from "Passed In Props From Parent: App". However, if we click over to the "App" parent component, the "setDarkMode" React Hook is still available.
66
+
<br/><br/>
67
+
<divclassName={classes.imgWrapper}>
68
+
<imgwidth="1300"src={deleteState2}/>
69
+
</div>
70
+
</p>
71
+
<br/><br/>
72
+
<h2>Step 5: Visualize the State Flow of Your Prototype Application</h2>
73
+
<pclassName={classes.text}>
74
+
Once you've added all your state variables to your components, you can click on the "Display" section of the State Manager. Here, you can see a tree diagram that shows the relationship between the components you have created. Click on each component to see its state variables -- including passed in props! <br/><br/>
75
+
On the left side of the screen, click on other root components (if using Classic React) or pages (if using Next.js or GatsbyJS) to see their tree diagrams too.
76
+
<br/><br/>
77
+
<divclassName={classes.imgWrapper}>
78
+
<imgwidth="1400"src={display}/>
79
+
</div>
80
+
<br/><br/>
81
+
Created state variables and React Hooks will also be visible in the <spanclassName={classes.notLink}onClick={()=>setPage('Code Preview')}>code preview</span>.<br/><br/>
82
+
You can see below that the "num" and its associated React Hook have been passed in to the "Row" component from its parent component.
83
+
<br/><br/>
84
+
On line 10, the state variable "darkMode" has been passed into the "Row" component from its parent, but without its React Hook, since we chose not to pass the hook down from the parent component.
0 commit comments