Author: John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Categories
React Answers

How to Modify Text Area Values with React?

gray animal

Sometimes, we want to modify the value of the text area with React.

In this article, we’ll look at how to modify the value of the text area with React.

Modify Textarea Values with React

To modify the value of the text area with React, we set the onChange prop to a function that calls a state setter function with e.target.value .

For instance, we can write:

import { useState } from "react";

export default function App() {
  const [val, setVal] = useState("");

  return (
    <div>
      <textarea value={val} onChange={(e) => setVal(e.target.value)}></textarea>
    </div>
  );
}

We create the val state with the useState hook.

Then we add a textarea element that has the onChange prop set to a function that calls setValue with e.target.value to set the val state to the input value of the textarea .

Finally, we set the value prop to val to update the display of the textarea with the inputted value.

Conclusion

To modify the value of the text area with React, we set the onChange prop to a function that calls a state setter function with e.target.value .

Categories
React Answers

How to Initiate a Draft.js Editor with Content within a React App?

white long coat small dog

Sometimes, we want to initiate a Draft.js editor with content within a React app.

In this article, we’ll look at how to initiate a Draft.js editor with content within a React app.

Initiate a Draft.js Editor with Content within a React App

To initiate a Draft.js editor with content within a React app, we can use the ContentState.createFromText method to create the initial content for the text editor.

Then we can pass that into the EditorState.createWithContent method to set the content state as the editor’s initial content.

For instance, we can write:

import { ContentState, Editor, EditorState } from "draft-js";
import { useRef, useState } from "react";

const content = ContentState.createFromText("<b>hello world</b>");

export default function App() {
  const [editorState, setEditorState] = useState(() =>
    EditorState.createWithContent(content)
  );

  const editor = useRef(null);
  const focusEditor = () => {
    editor.current.focus();
  };

  return (
    <div
      style={{ border: "1px solid black", minHeight: "6em", cursor: "text" }}
      onClick={focusEditor}
    >
      <Editor
        ref={editor}
        editorState={editorState}
        onChange={setEditorState}
        placeholder="Write something!"
      />
    </div>
  );
}

We add:

const content = ContentState.createFromText("<b>hello world</b>");

to set “<b>hello world</b>” to create the initial content of the editor,

Then we have:

const [editorState, setEditorState] = useState(() =>
  EditorState.createWithContent(content)
);

to set the content as the initial state of the editorState , which has the initial value of the text editor which can be used by Draft.js’ Editor component.

Then we set the editorState prop to the editorState state as its value.

The onChange prop is set to the setEditorState function that sets binds the editorState to the input value of the editor.

Therefore, <b>hello world</b> is the content of the editor when it’s loaded initially.

Conclusion

To initiate a Draft.js editor with content within a React app, we can use the ContentState.createFromText method to create the initial content for the text editor.

Then we can pass that into the EditorState.createWithContent method to set the content state as the editor’s initial content.

Categories
React Answers

How to Fix a Checkbox not Emitting the Change Event in React?

Sometimes, we may encounter the issue where a checkbox not emitting the change event when we’re developing a React app.

In this article, we’ll look at how to fix the issue where a checkbox not emitting the change event when we’re developing a React app.

Fix a Checkbox not Emitting the Change Event in React

To fix the issue where a checkbox not emitting the change event when we’re developing a React app, we should get the checked value of the checkbox by setting the onChange prop to a function that gets the checked value of the checkbox.

Then we can set the checkbox value by setting the checkbox to a state that’s set to the checked value of the checkbox.

For instance, we can write:

import { useState } from "react";

export default function App() {
  const [active, setActive] = useState(false);
  return (
    <div className="App">
      <input
        type="checkbox"
        checked={active}
        onChange={(e) => setActive(e.target.checked)}
      />
    </div>
  );
}

to set the onChange prop to a function that calls the setActive function with e.target.checked to set the active state to the checked value of the checkbox.

Then we set the checked prop to the value of the active state to make the checkbox update with the checked value of the active state.

Conclusion

To fix the issue where a checkbox not emitting the change event when we’re developing a React app, we should get the checked value of the checkbox by setting the onChange prop to a function that gets the checked value of the checkbox.

Then we can set the checkbox value by setting the checkbox to a state that’s set to the checked value of the checkbox.

Categories
Express JavaScript Answers

How to Serve a Single Static File with Express.js?

black short coated dog on persons hand

To serve a single static file with Express.js, we can use the express.static middleware.

For instance, we can write:

const express = require('express')
const app = express()
const port = 3000

app.use("/foo.txt", express.static(__dirname + '/foo.txt'));

app.get('/', (req, res) => {
  res.send('hello world')
});

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

to add:

app.use("/foo.txt", express.static(__dirname + '/foo.txt'));

to use the express.static middleware to expose the foo.txt file to the public.

We make it accessible by making a request to “/foo.txt” since that’s the first argument we passed into app.use .

And we make it serve the foo.txt file from the current working directory with:

express.static(__dirname + '/foo.txt')

So when we make a request to /foo.txt , we would see its contents in the response.

Categories
Express JavaScript Answers

How to Generate robots.txt in Express?

red and white happy birthday card

To generate a robots.txt file from our Express app, we can create a robots.txt file that returns the text content of the robots.txt file.

For instance, we can write:

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('hello world')
});

app.use('/robots.txt', function(req, res, next) {
  res.type('text/plain')
  res.send("User-agent: *\nDisallow: /");
});

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

to create the /robots.txt route by writing:

app.use('/robots.txt', function(req, res, next) {
  res.type('text/plain')
  res.send("User-agent: *\nDisallow: /");
});

We call res.type to set the MIME type of the response to text/plain .

And we call res.send with the robots.txt content we want to return.

So when we make a GET request to the /robots.txt route, we get:

User-agent: *
Disallow: /