All files / src/chap03 TitledPanel.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
// export default function TitledPanel({ title, body }) {
//   return (
//     <div style={{
//       margin: 50,
//       padding: 5,
//       border: '1px solid #000',
//       width: 'fit-content',
//       boxShadow: '10px 5px 5px #999',
//       backgroundColor: '#fff'
//     }}>
//       {title}
//       <hr />
//       {body}
//     </div>
//   );
// }
 
// key 속성이 title/body인 요소를 가져온다.
export default function TitledPanel({ children }) {
  const title = children.find(elem => elem.key === 'title');
  const body = children.find(elem => elem.key === 'body')
 
  return (
    <div style={{
      margin: 50,
      padding: 5,
      border: '1px solid #000',
      width: 'fit-content',
      boxShadow: '10px 5px 5px #999',
      backgroundColor: '#fff'
    }}>
      {title}
      <hr />
      {body}
    </div>
  );
}