# All files / src/chap03 TitledPanel.js

0% Statements 0/5
100% Branches 0/0
0% Functions 0/3
0% Lines 0/3

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    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>
      );
    }