React Base Fiddle (JSX)

Starting point for creating JSFiddles with React.

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

Babel + JSX

const ChildComponent = (prop1) => {
  const [myCustomValue, updateMyCustomValue] = React.useState(0);
  
  const myCustomAction = () => {
    updateMyCustomValue(myCustomValue + 1);
  }

  const view = () => (
    <input type="button" onClick={myCustomAction} value={`${myCustomValue} - ${prop1}`} />
  );

  return {
    store: myCustomValue,
    actions: myCustomAction,
    view,
  };
};

const ParentComponent = () => {
  const prop1 = 'test';

  const Test1 = ChildComponent(prop1);

  return (
    <div>
      <div>
        <h1>Instance 1</h1>
        <h2>Component Default View</h2>
        <Test1.view />
        <h2>Parent can also trigger updates and show data from component</h2>
        <input type="button" onClick={Test1.actions} value={Test1.store} />
      </div>
    </div>
  );
}

ReactDOM.render(
  <ParentComponent />,
  document.getElementById('container')
);