Simulate keypress while mapping data inside input field [duplicate]

Question

I'm gathering data from different places, and the goal is to map them inside an input field, so users can edit or instantly copy the data.

Right now i'm gathering all the data inside an array, throughout the state which i'm printing inside an input field using the .map function.

My questing being: how can i add a break after each mapped item inside the input field.

The following does not work (note i tried adding < br > to the output but it will just give me < Object object >):

render() {
  const {data} = this.props
  const listData = data.map((data) => data.tc + <br/>);

  return (
    <Form className="flex-item-100">
        <FormGroup>
            <Label for="exampleText">Test Cases</Label>
            <Input readOnly type="textarea" name="text" id="exampleText" value={listData} />
        </FormGroup>
    </Form>
  );
}

Answer 1

Although I see you are using some custom Input but I think it will still not allow you to have html as value of input field.

Also, map will not return string it will give you array which again cannot be used as value for input, what you need is join. Something like this

var values = valuesInArray.join('\r\n')

Also use textarea instead of input

Answer 2

use \n instead of <br />

const listData = data.map((data) => data.tc + '\n');