React. Transferring data from textarea to array JSON

Question

I just started working with React and JSON and require some help. There is a textarea field in which a user enters some data. How to read row-wise the entered text as an array into a JSON variable of the request? Any assistance would be greatly appreciated.

The result I want is

     {
        id: 3,
        name: 'Monika',
        birthDay: '1999/01/01',
        countryDTO: 'USA',
        films: [
                  'Leon:The Professional',
                  'Star wars',
                  'Django Unchained',
               ],
    } ```

My code:

    import React from 'react';
    import { Form, FormGroup, Label } from 'reactstrap';
    import '../app.css';

    export class EditActor extends React.Component {
    state = {
        id: '',
        name: '',
        birthDay: '',
        countryDTO: '',
        films: [],
    }

    componentDidMount() {
        if (this.props.actor) {
            const { name, birthDay, countryDTO, films } = this.props.actor
            this.setState({ name, birthDay, countryDTO, films });
        }
    }

    submitNew = e => {
        alert("Actor added"),
            e.preventDefault();
        fetch('api/Actors', {
            method: 'post',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                name: this.state.name,
                birthDay: this.state.birthDay,
                countryDTO: {
                    title: this.state.countryDTO
                },
                films: [{ title: this.state.films }]
            })
        })
            .then(() => {
                this.props.toggle();
            })
            .catch(err => console.log(err));

        this.setState({
            id: '',
            name: '',
            birthDay: '',
            countryDTO: '',
            films: ''
        });
    }

    onChange = e => {
        this.setState({ [e.target.name]: e.target.value })
    }

    render() {
        return <div>
            <table>
                    <tr>
                        <td colspan="2">   
                            <h3> <b>Add actor</b></h3>

                    <FormGroup>
                    <Label for="id">Id:  </Label>
                                <input type="text" name="id" onChange={this.onChange} value={this.state.id} /><p />

                    <Label for="name">Name:</Label>
                                <input type="text" name="name" onChange={this.onChange} value={this.state.name} /><p />

                    <Label for="birthDay">Birth day:</Label>
                    <input type="text" name="birthDay" onChange={this.onChange} value={this.state.birthDay} placeholder="1990/12/31" /><p />

                    <Label for="country">Country:</Label>
                                <input type="text" name="countryDTO" onChange={this.onChange} value={this.state.countryDTO} /><p />

                    <Label for="Films">Films:</Label>
                    <textarea name="films" value={this.state.films} onChange={this.onChange} /><p />
                    </FormGroup>

                        </td>
                    </tr>
                    <tr>
                        <td>

                <Form onSubmit={this.submitNew}>
                            <button class="editButtn">Enter</button>
                </Form>
                        </td>

                    </tr>
            </table >
        </div>;
    }
}

export default EditActor;

Answer 1

If you change the below code it will work automatically.

State declaration

 this.state = {
      name: 'React',
      films:["Palash","Kanti"]
    };

Change in onechange function

onChange = e => {
  console.log("values: ", e.target.value)
    this.setState({ [e.target.name]: e.target.value.split(",") })
}

change in textarea

  <textarea name="films" value={this.state.films.map(r=>r).join(",")} onChange={this.onChange} />

Code is here: https://stackblitz.com/edit/react-3hrkme