How to access the typed value of a child in an element

Question

I want to access the value of a textfield that's being created by React. The code is below:

class Paragraph extends React.Component {
  render() {
    let style = {
      height: "150px",
      marginBottom: "10px"
    };

    return (
      <div className="paragraph" id={this.props.id}>
        <div className="row">
          <div className="col-sm-11">
            <textarea
              className="form-control"
              name={"paragraph" + this.props.id}
              placeholder="Put Paragraph Here"
              style={style}
              required
            ></textarea>
          </div>
          <div className="col-sm-1">
            <div
              className="btn btn-danger del-rotate"
              onClick={() => this.props.remove(this.props.id)}
            >
              &times;
            </div>
          </div>
        </div>
      </div>
    );
  }
}

I'm using an index.js, which contains an App and adds a Paragraph. I want to access the value typed in the textarea from my index.js, which uses Paragraph. How do I do this?

Are you asking how to access `value` of `textarea` inside of **child** from a **parent** component? https://reactjs.org/docs/lifting-state-up.html and this https://reactjs.org/docs/forms.html#the-textarea-tag — goto, Feb 28 '20 at 09:58
@goto1, yes I want to access the value inside the textarea from a parent class — Papaya, Feb 28 '20 at 09:59
use props for the communication, and then pass it along. also don't forget to add change handler to your text area — joy08, Feb 28 '20 at 10:01

score 3 · Answer 1 · answered Feb 28 '20 at 10:00

3

You control the values

In react when you have an input you must control the state of that input.

simple example

Using the react function useState we can control this input. state will always be our value.

const myComp = () => {
  const [state, changeState] = useState('');
  return <input type="text" onChange={e => changeState(e.target.value)} value={state} />;
};

answered Feb 28 '20 at 10:00

Joe Lloyd

19,471
7
53
81

This still doesn't take care of OP's issue where he wants to access value of a `textarea` inside of `child` from the `parent`. – goto Feb 28 '20 at 10:05
pass state and changeState to the child EZ – Joe Lloyd Feb 28 '20 at 10:36

joy08 · Answer 2 · 2020-02-28T10:10:34.737

0

use props for the communication, and then pass it along. also don't forget to add change handler to your text area

For component communication :

React | pass data from parent to child component

How to pass data from parent to child in react.js

https://medium.com/@ruthmpardee/passing-data-between-react-components-103ad82ebd17

A sample for your case:

class TextArea extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      textareaValue: ''
    }
  }
  handleOnChange(event) {
    this.setState({
      textareaValue: event.target.value
    })
  }

  render() {
    return <div>
              <textarea  
                   rows={10} 
                   cols={30} 
                   value= {this.state.textareaValue} 
                   onChange={(event) => this.handleOnChange(event)}>
             </textarea>
           </div>
  }
}

edited Feb 28 '20 at 10:10

answered Feb 28 '20 at 10:02

joy08

9,004
8
38
73

Instead you can mention what needs to be changed will make it a nice answer. – Jai Feb 28 '20 at 10:04
You're not using `props` for communication as you suggested though. – goto Feb 28 '20 at 10:10
@goto1 Its just a sample. Have provided few links though regarding component interaction – joy08 Feb 28 '20 at 10:11

How to access the typed value of a child in an element

2 Answers2

You control the values

simple example