Tips for auto-populating a text area with a string that includes <br /> tags interspersed throughout the text

When I receive a string like

1 2 <br /> 3 <br /> 4 4
, my goal is to display it in a textarea with LINE BREAKS.

To see what I am attempting to achieve, please check out the jsfiddle link below: https://jsfiddle.net/pejxqn68/1/

class Hello extends React.Component {
  render() {
    return (
        <div>
          <textarea value={this.props.textareaValue}></textarea>
        </div>
    );
  }
}

ReactDOM.render(
  <Hello textareaValue="1 2 <br /> 3 <br /> 4 4" />,
  document.getElementById('container')
);

Is there a way to show the string in the textarea while interpreting the br tags as line breaks?

Edit -

As changing the textarea to a div is not an option for me, finding a solution using react would be preferable.

Answer №1

Here is a helpful tip: substitute all instances of br with \n class Greetings extends React.Component { render() { return ( ); } }

ReactDOM.render(
  <Greetings textContent={"1 2 <br /> 3 <br /> 4 4".replace(/<br\s?\/?>/g,"\n")} />,
  document.getElementById('container')
);

To see it in action, check out this working example https://jsfiddle.net/pejxqn68/22/

Answer №2

While I may not be an expert on React, I do know a trick for creating line breaks. You can achieve this by converting <br /> to \n.

Simply follow these steps:

"1 2 <br /> 3 <br /> 4 4".replace(/\<br +\/\>/g, '\n')

Check out the demonstration in this fiddle

Answer №3

To easily convert the <br> tag to a line break character, you can utilize a regular expression in your code:

class Greetings extends React.Component {
  render() {
    return (
        <div>
          <textarea value={this.props.textareaValue.replace(/<br \/>/g, '\n')} />
        </div>
    );
  }
}

ReactDOM.render(
  <Greetings textareaValue="1 2 <br /> 3 <br /> 4 4" />,
  document.getElementById('container')
);

Check out the updated Fiddle here: https://jsfiddle.net/pahund/pejxqn68/24/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Activate animation upon reaching a predetermined Component/Node through scrolling

Is there a way to tie the useScrollTrigger hook to a specific Component/Node instead of the default window value? The useScrollTrigger expected parameters are as follows: export interface UseScrollTriggerOptions { disableHysteresis?: boolean; target? ...

Tips for effectively binding attributes based on conditions in Vue.js

Is it possible to conditionally bind attributes in Vue? Yes, you can achieve this using the v-bind directive: Here is an example: <img :src=" status = true ? 'open.svg' : 'close.svg'"> In Angular, this functionality i ...

enclosing text in a div container in WordPress

My WordPress website is built on the Bootstrap framework and includes content with images and text. I'm attempting to encase the text content in row and col-md-10 tags, while leaving the images as they are. This content is pulled into my single.php p ...

Explaining the functionality of parentheses {} within a promise object in React

In my current project, I have implemented a simple React component. Here is the code snippet: import React from 'react'; export default class UserProfile extends React.Component { constructor(props) { super(props); ...

Experimenting with Cucumber tests using JQuery UI Sliders

I am faced with a task of testing a collection of 10 JQuery UI sliders in a systematic manner. Specifically, I am required to manually drag each slider handle and verify the current value of the slider. My attempts at achieving this through various metho ...

Excessive Text Overflow in HTML Input Placeholder

<input class="form-control" style="width: 15rem; height: 15rem;" v-model="formData.booking_code" placeholder="Enter Booking Code, e.g. XYBJLL" /> I am facing an issue where the placeholder text ...

Generating images from an array using individual functions

Can anyone assist me with this issue? Here is the array I'm working with: var imageArr = [ { someobject: '..', anotherobject: '..', img: 'SourceOfFirstImg.jpg'}, { someobject: '..', anotherobject: &apo ...

Transform nested JSON objects into a JSON array using JavaScript

Hey there! I've got this JSON structure that I'm trying to convert into an array without having to iterate over each element. Is there a JavaScript function that can help me achieve this? { "ES": { "130": { "code": "A Coruсa", ...

Transforming a redux form onSubmit function into a promise-based structure

One of my goals is to promisify the onSubmit handling in my submitForm for redux form. You can find a similar example here. submitForm = () => { return this.props.submituserForm() .then(() => { console.log('test') }) ...

The policy of Cross-Origin-Opener-Policy could prevent the window.closed function from being executed

Hey there! I've encountered an issue while trying to implement Google Login in my React.js project. I opted for the @react-oauth/google library. import { Button, Typography } from '@mui/material' import { GoogleOAuthProvider, useGoogleLogin ...

What causes the error message when attempting to assign an argument of type 'any[]' to a parameter expecting type 'never'?

I encountered the following error in this code: Argument of type 'any[]' is not assignable to parameter of type 'never' var markers: []; this.Getlapoints(this.map.getCenter(), 500000).then(data => { for (var key in data) { ...

Each time I attempt to read a single document, Next.js and Firebase consistently encounter serialization errors

Currently, I am in the process of developing a blog website, and most of it is completed except for the functionality of being able to click on a post stub to read the full post. Whenever I try to navigate to the post page, I encounter the following error: ...

What is the process for updating mesh textures?

I'm sorting out an issue in my React project where I can't seem to access the material property of a mesh I'm working on. Despite seeing the property when logging the object to console, attempting to access it using 'mesh.material' ...

Ensure that the hashmap data type is correctly defined when passing it as an argument

import React from 'react'; import styled from 'styled-components'; const IconWrapper = styled.Text` font-family: MyFont; `; const glyphs = { 'logo': '\ue94e', 'minus': '\ue900', ...

Invoke a JavaScript function from an external script while passing a parameter upon the loading of a webpage

I am still new to JavaScript, so I was wondering if there is a way to achieve the following: main.js: $(function () { $('.delete_btn').click(function () { var confirmation = confirm('Do you want to remove this event?'); ...

Utilizing numerous occurrences of an npm package

Currently working on integrating handlebars as a view engine. I am looking to have multiple instances of Handlebars in order to cater to different users with different helpers/partials. Can someone kindly share an example or guide me on how to achieve th ...

Having trouble integrating Tippy for a button in ReactJS

I recently imported the following packages and attempted to reference the link provided below, but I am unsure where to place the tippy code. Can someone please assist me with this issue? import React from 'react'; import ReactDOM from 'r ...

The dependency tree could not be resolved due to an ERESOLVE error in npm

After cloning this project from a repository with the command git clone, I navigated to the correct directory. For example: However, when I tried to install the project, I encountered an error. Here is an image of the error message: enter image descripti ...

Tips for Building a Dual-Column Form Using React Material-UI

Currently, I am in the process of creating a react form using material-ui. The main goal is to design the form with a fixed 2 column layout that does not adjust based on the browser size. The desired structure should always appear like this: |First Name ...

Dropdown Menu in Bootstrap fails to display any items

My customized bootstrap navbar dropdown is behaving oddly in my custom navbar. Any thoughts on why this is happening and how to resolve the issue? The screenshot below illustrates the problem - the dropdown menu items are not visible unless I hover over th ...