Artifact
a10c1f27b041659459335e11dc9469b2acf8f78a8e46f977716dd6cbbdbc94fe:
0000: 3c 76 69 72 74 75 61 6c 2d 6e 65 73 74 65 64 2d <virtual-nested-
0010: 63 6f 6d 70 6f 6e 65 6e 74 3e 0a 20 20 3c 64 69 component>. <di
0020: 76 3e 0a 20 20 20 20 3c 76 69 72 74 75 61 6c 20 v>. <virtual
0030: 65 61 63 68 3d 7b 20 70 65 72 73 6f 6e 20 69 6e each={ person in
0040: 20 70 65 6f 70 6c 65 20 7d 3e 0a 20 20 20 20 20 people }>.
0050: 20 3c 6e 6f 74 2d 76 69 72 74 75 61 6c 2d 63 6f <not-virtual-co
0060: 6d 70 6f 6e 65 6e 74 32 20 6e 61 6d 65 3d 7b 20 mponent2 name={
0070: 70 65 72 73 6f 6e 2e 6e 61 6d 65 20 7d 20 61 67 person.name } ag
0080: 65 3d 7b 20 70 65 72 73 6f 6e 2e 61 67 65 20 7d e={ person.age }
0090: 3e 3c 2f 6e 6f 74 2d 76 69 72 74 75 61 6c 2d 63 ></not-virtual-c
00a0: 6f 6d 70 6f 6e 65 6e 74 32 3e 0a 20 20 20 20 3c omponent2>. <
00b0: 2f 76 69 72 74 75 61 6c 3e 0a 20 20 3c 2f 64 69 /virtual>. </di
00c0: 76 3e 0a 20 20 3c 73 63 72 69 70 74 3e 0a 20 20 v>. <script>.
00d0: 20 20 74 68 69 73 2e 70 65 6f 70 6c 65 20 3d 20 this.people =
00e0: 5b 0a 20 20 20 20 20 20 7b 20 6e 61 6d 65 3a 20 [. { name:
00f0: 27 4a 61 63 6b 27 2c 20 61 67 65 3a 20 31 30 20 'Jack', age: 10
0100: 7d 2c 0a 20 20 20 20 20 20 7b 20 6e 61 6d 65 3a },. { name:
0110: 20 27 53 75 73 79 27 2c 20 61 67 65 3a 20 35 20 'Susy', age: 5
0120: 7d 2c 0a 20 20 20 20 20 20 7b 20 6e 61 6d 65 3a },. { name:
0130: 20 27 4d 65 6c 27 2c 20 61 67 65 3a 20 31 35 20 'Mel', age: 15
0140: 7d 2c 0a 20 20 20 20 20 20 7b 20 6e 61 6d 65 3a },. { name:
0150: 20 27 46 72 65 64 27 2c 20 61 67 65 3a 20 32 30 'Fred', age: 20
0160: 20 7d 0a 20 20 20 20 5d 0a 20 20 3c 2f 73 63 72 }. ]. </scr
0170: 69 70 74 3e 0a 0a 3c 2f 76 69 72 74 75 61 6c 2d ipt>..</virtual-
0180: 6e 65 73 74 65 64 2d 63 6f 6d 70 6f 6e 65 6e 74 nested-component
0190: 3e 0a 0a 3c 6e 6f 74 2d 76 69 72 74 75 61 6c 2d >..<not-virtual-
01a0: 63 6f 6d 70 6f 6e 65 6e 74 32 3e 0a 20 20 3c 73 component2>. <s
01b0: 70 61 6e 3e 7b 20 6f 70 74 73 2e 6e 61 6d 65 20 pan>{ opts.name
01c0: 7d 20 2d 20 7b 20 6f 70 74 73 2e 61 67 65 20 7d } - { opts.age }
01d0: 20 3c 62 72 2f 3e 3c 2f 73 70 61 6e 3e 0a 3c 2f <br/></span>.</
01e0: 6e 6f 74 2d 76 69 72 74 75 61 6c 2d 63 6f 6d 70 not-virtual-comp
01f0: 6f 6e 65 6e 74 32 3e 0a onent2>.