Btukfyl

I'm trying to create an input text inside a react component and then I realised that it's a bad praxis. So I investigated a little bit so I found Controlled-Components, so I think this is what I need, but looking at my Component I do not know how to create it.

I do not have an extends Redux.Component so a friend suggested me to create a Component but couldn't get succeed.

What I was trying is this :

Inside my component

 <input

        ...

      />

      {"  "}

      <input

        ...

      />

      <span>

        <myButton

          ...

          arguments={[document.getElementById("id1").value, document.getElementById("id2").value]}

        >

          [ send ]

        </myButton>{" "}

      </span>

But I'm getting this error :

The given id must not be null!; nested exception is java.lang.IllegalArgumentException: The given id must not be null!

EDIT

On my component where I have all of those code I have this :

 <myButton

          id={id}

          arguments={[intputStuff]}

        >

So my problem is if I do what Tom's says I do not have the id in the other component.

So the thing should be create this component inside the other component and then get the values of the inputtexts and put them as an arguments

It's not clear from your post what exactly you're trying to accomplish.

It appears that you're trying to build a component with 2 text inputs and a button.

If you want the button to "submit" the values of the two inputs, you should do something like this:

class SomeComponent extends React.Component {



    constructor(props) {

        super(props)



        this.state = {

            value1: props.initialValue1,

            value2: props.initialValue2

        }

    }





    onChangeText = (event) => this.setState({ [event.target.name]: event.target.value })





    onClickSubmit = (event) => {

        let { onSubmit } = this.props

        if(typeof onSubmit !== 'function') return



        let { value1, value2 } = this.state

        return onSubmit([ value1, value2 ])

    }





    render() {

        let {

            initialValue1,

            initialValue2,

            onSubmit,

            className,

            ...props

        } = this.props



        let {

            value1,

            value2

        } = this.state



        return (

            <div className={`SomeComponent ${className}`} {...props}>

                <input value={value1} name="value1" onChange={this.onChangeText} />



                <input value={value2} name="value2" onChange={this.onChangeText} />



                <button onClick={this.onClickSubmit}>

                    Submit

                </button>

            </div>

        )

    }

}

A few notes:

1. This example uses a bunch of futuristic JS: destructuring, rest/spread, class properties, computed property names, and arrow functions. Each feature is being leveraged for a specific purpose, not just because they're cool. If your environment doesn't support some of these features, you'll need to find a workaround that makes good on some additional constraints.




2. This is not a controlled component, but it does contain 2 controlled inputs. It uses the "initialValue" pattern: the owning component provides starting values, but is unaware of the blow-by-blow as the user types each character. The owning component is only notified of the new values when the button is clicked. This pattern can result in loss of data if the owner is re-rendered before the current value are submitted.




3. Generally, when using React, you want to avoid using native DOM methods to access or manipulate elements. (There are plenty of exceptions, of course.) One reason you want to avoid native DOM methods is that component lifecycle methods might execute before the React renderer has actually updated the DOM -- so document.getElementById('someid') might return undefined.