Category: React

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.

Sometimes, we want to update a React input text field with the value on onBlur event.

In this article, we’ll look at how to update a React input text field with the value on onBlur event.

How to update a React input text field with the value on onBlur event?

To update a React input text field with the value on onBlur event, we can set the onBlur prop of the input to a function that does something with the input value.

For instance, we write:

import React, { useState } from "react";

export default function App() {
  const [inputValue, setInputValue] = useState("");

  const handleChange = (e) => {
    setInputValue(e.target.value);
  };

  const updateInput = () => {
    console.log(inputValue);
  };

  return (
    <div>
      <input value={inputValue} onChange={handleChange} onBlur={updateInput} />
    </div>
  );
}

We defined the inputValue state with the useState hook.

Then we set the value prop of the input to inputValue.

And we set the onChange prop to handleChange to set inputValue to the value of the input with setInputValue.

Next, we set the onBlur prop to updateInput to log the value of inputValue when we move focus away from the input.

Conclusion

To update a React input text field with the value on onBlur event, we can set the onBlur prop of the input to a function that does something with the input value.