Simulate keypress while mapping data inside input field

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>
  );
}

score 1 · Accepted Answer · answered Mar 07 '19 at 10:06

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

answered Mar 07 '19 at 10:06

Umair Abid

1,453
2
18
35

Thanks for the explanation. works perfect. – D.Rooij Mar 07 '19 at 10:17

score 0 · Answer 2 · answered Mar 07 '19 at 10:02

0

use \n instead of <br />

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

answered Mar 07 '19 at 10:02

SiSa

2,594
1
15
33

Simulate keypress while mapping data inside input field

2 Answers2