Logo
Color-Of-Code
  Home   All tags   Terms and Conditions

Test React

March 10, 2020

Test

Test inlining a react component inside markdown. This component uses the useState hook.

Embedded Counter component

0

Source

import React, { useState } from 'react';
import PropTypes from 'prop-types';

const valueStyle = {
  width: '8em',
  display: 'inline-block',
  textAlign: 'center',
};

const Counter = ({ initialvalue }) => {
  const [count, setCount] = useState(initialvalue);

  const handleIncrement = () => setCount(count + 1);
  const handleDecrement = () => setCount(count - 1);

  return (
    <span>
      <span style={valueStyle}>{count}</span>
      <button onClick={handleDecrement}>-1</button>
      <button onClick={handleIncrement}>+1</button>
    </span>
  );
};

Counter.propTypes = {
  initialvalue: PropTypes.number,
};

Counter.defaultProps = {
  initialvalue: 0,
};

export default Counter;