Reusable Spacer Component

Reusable Spacer Component

Easy ReactJS Component Design 26 views
Explanation Complexity

Problem Statement

Create a Spacer component to add vertical space without magic numbers everywhere.

Input Format

No input.

Output Format

Render a React component.

Constraints

Accept size prop in pixels.

Input / Output Format

Input Format
No input.
Output Format
Render a React component.
Constraints
Accept size prop in pixels.

Examples

Input:
Output:
(React code)

Example Solution (Public)

ReactJS 
import React from 'react';

function Spacer({ size = 12 }) {
  return <div style={{ height: size }} />;
}

export default function App() {
  return (
    <div style={{ padding: 16 }}>
      <strong>meetcode</strong>
      <Spacer size={16} />
      <button type='button' style={{ padding: '10px 14px', borderRadius: 12, border: 0, background: '#0b5', color: '#fff' }}>Start</button>
    </div>
  );
}

Official Solution Code

import React from 'react';

function Spacer({ size = 12 }) {
  return <div style={{ height: size }} />;
}

export default function App() {
  return (
    <div style={{ padding: 16 }}>
      <strong>meetcode</strong>
      <Spacer size={16} />
      <button type='button' style={{ padding: '10px 14px', borderRadius: 12, border: 0, background: '#0b5', color: '#fff' }}>Start</button>
    </div>
  );
}
Please login to submit solutions.
Editor
Output

                                        

                                    

                                    

                                        

                                                                                    
Please login to submit solutions.