Author: John Au-Yeung

Sometimes, we want to parse data from JSON in React.

In this article, we’ll look at how to parse data from JSON in React.

How to parse data from JSON in React?

To parse data from JSON in React, we can use the JSON.parse method.

For instance, we write:

import React from "react";

const str = `{"name": "abc","messages":["msg 1","msg 2","msg 3"],"age":100}
`;

const myObject = JSON.parse(str);

export default function App() {
  console.log(myObject);

  return <div></div>;
}

We have the str JSON string that we parsed into a JavaScript object with JSON.parse.

Then we logged its value in App.

Conclusion

To parse data from JSON in React, we can use the JSON.parse method.

Sometimes, we want to read Excel files in React.

In this article, we’ll look at how to read Excel files in React.

How to read Excel files in React?

To read Excel files in React, we can use the xlsx package.

To install it, we run:

npm i xlsx

Then we can use it by writing:

import React from "react";
import * as XLSX from "xlsx";

export default function App() {
  const onChange = (e) => {
    const [file] = e.target.files;
    const reader = new FileReader();

    reader.onload = (evt) => {
      const bstr = evt.target.result;
      const wb = XLSX.read(bstr, { type: "binary" });
      const wsname = wb.SheetNames[0];
      const ws = wb.Sheets[wsname];
      const data = XLSX.utils.sheet_to_csv(ws, { header: 1 });
      console.log(data);
    };
    reader.readAsBinaryString(file);
  };
  return (
    <div>
      <input type="file" onChange={onChange} />
    </div>
  );
}

We define the onChange function that takes the file from the file input with:

const [file] = e.target.files;

Then we create a FileReader instance to read the file.

We set the reader.onload property to a function that reads the file.

We get the result with:

const bstr = evt.target.result;

Then we have:

const wb = XLSX.read(bstr, { type: "binary" });

to read the Excel file.

Next, we get the sheet name of the first sheet with:

const wsname = wb.SheetNames[0];

And we get the content of the first sheet with:

const ws = wb.Sheets[wsname];

Finally, we convert the Excel data to CSV with:

const data = XLSX.utils.sheet_to_csv(ws, { header: 1 });

And we call reader.readAsBinaryString with file to read the file.

Conclusion

To read Excel files in React, we can use the xlsx package.

To open PDF when clicking on a link with React, we can import the PDF file as a module and set that as the value of the href prop.

For instance, we write:

import React from "react";
import pdf from "./dummy.pdf";

export default function App() {
  return (
    <div>
      <a href={pdf} target="_blank" rel="noreferrer">
        Download Pdf
      </a>
    </div>
  );
}

We set the href prop of the a element to pdf which we imported with import.

Then we set the target prop to '_blank' to open the PDF in a new window.

We also have rel="noreferrer" to make sure that no referrer info is leaked when the link is clicked.

Sometimes, we want to cause anchors to do nothing on click in React.

In this article, we’ll look at how to cause anchors to do nothing on click in React.

How to cause anchors to do nothing on click in React?

To cause anchors to do nothing on click in React, we can call e.preventDefault in the click handler function of the anchor.

For instance, we write:

import React from "react";

export default function App() {
  const onClick = (e) => {
    e.preventDefault();
    console.log("on click");
  };

  return (
    <div>
      <a href="#" onClick={onClick}>
        Click me
      </a>
    </div>
  );
}

We have the onClick function that calls e.preventDefault to prevent the default action of going to the URL specified by the href attribute of the anchor.

Then we set the onClick prop of the anchor to the onClick function to use that as the click handler.

Now we should see 'on click' logged when we click on the anchor.

Conclusion

To cause anchors to do nothing on click in React, we can call e.preventDefault in the click handler function of the anchor.

Sometimes, we want to add space between two elements on the same line with React.

In this article, we’ll look at how to add space between two elements on the same line with React.

How to add space between two elements on the same line with React?

To add space between two elements on the same line with React, we can use flexbox.

For instance, we write:

import React from "react";

export default function App() {
  return (
    <div style={{ display: "flex", justifyContent: "space-between" }}>
      <div>foo</div>
      <div>bar</div>
    </div>
  );
}

We set the style prop of the outer div to { display: "flex", justifyContent: "space-between" } to make the div have a flexbox layout.

Then we can set justifyContent to "space-between" to display the 2 inner divs at the 2 ends of the outer div.

Conclusion

To add space between two elements on the same line with React, we can use flexbox.