From 7daf6f455eab1ed3b1bf14040cc5b1672de70b91 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C3=ABl=20Zasso?= <targos@protonmail.com>
Date: Wed, 14 Jul 2021 16:28:39 +0200
Subject: [PATCH] fix: set a default value for the data prop

Otherwise it renders a spinner instead of the empty text.
---
 src/component/NMRium.tsx | 5 ++++-
 src/demo/views/View.jsx  | 6 +++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/component/NMRium.tsx b/src/component/NMRium.tsx
index d4811a1de..ca07ad553 100644
--- a/src/component/NMRium.tsx
+++ b/src/component/NMRium.tsx
@@ -203,9 +203,12 @@ export interface NMRiumData {
 }
 
 const defaultPreferences = {};
+const defaultData: NMRiumData = {
+  spectra: [],
+};
 
 function NMRium({
-  data: dataProp,
+  data: dataProp = defaultData,
   mode = NMRiumMode.DEFAULT,
   preferences = defaultPreferences,
   getSpinner = defaultGetSpinner,
diff --git a/src/demo/views/View.jsx b/src/demo/views/View.jsx
index 1f68b5a09..5b6e67d93 100644
--- a/src/demo/views/View.jsx
+++ b/src/demo/views/View.jsx
@@ -30,11 +30,11 @@ export default function View(props) {
         setData(_d);
       });
     } else {
-      setData({});
+      setData(undefined);
     }
   }, [baseURL, file, props]);
 
-  const changeHadnler = useCallback((logData) => {
+  const changeHandler = useCallback((logData) => {
     setCallbackData((prevLogs) => {
       return prevLogs.concat({
         datetime: new Date().toLocaleTimeString(),
@@ -113,7 +113,7 @@ export default function View(props) {
       >
         <div style={{ display: 'flex', flexDirection: 'row', width: '100%' }}>
           <div style={{ width: isCallbackVisible ? '75%' : '100%' }}>
-            <NMRium data={data} onDataChange={changeHadnler} />
+            <NMRium data={data} onDataChange={changeHandler} />
           </div>
           {process.env.NODE_ENV !== 'production' && (
             <div