0

I published my react-app to heroku with my own written form validation. On localhost the validation works. In my componentDidMount in Validation.jsx I check for the correct children type:

 let formExist = this.props.children.type.name === "Form";
 if (!formExist) throw new Error("Validation must have a form");

Here the Validation implementation:

<Validation onSubmit={this.fetchCharacter}>
        <Form id="search-marvel-character">
                    <Item config={{
                        name: "name",
                        isRequired: {
                            value: true,
                            messages: ["Name benötigt"]
                        }
                    }}>
                        <label htmlFor="name">Charaktername</label>
                        <input
                            onChange={(e) => { this.setState({ name: e.target.value }) }}
                            name="name"
                            type="text"
                            className="rounded-md h-6 block mx-auto p-4 w-full" />
                    </Item>
                    <div className="text-center text-red-500 text-lg font-bold my-2">
                        {this.state.errorMessage}
                    </div>
                    <div className="text-center text-green-500 text-lg font-bold my-2">
                        {this.state.successMessage}
                    </div>
                    <LoadingButton
                        type="submit"
                        loading={this.state.loading}>Suchen</LoadingButton>
         </Form>
 </Validation>

As you can see the children of the Validation is a Form / React element. So the props.children.type gives you the react class:

And there you can access the name of the class. I did a console.log(this.props.children.type); locally:

class Form extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {

And then on the server:

n(){var e;Object(h.a)(this,n);for(var r=arguments.length,s=new Array(r),a=0;a<r;a++)s[a]=arguments[a];return(e=t.call.apply(t,[this].concat(s))).state={},e}

Why does it change like that and how can i omit this? Because now I get "n" as type.name so I can't check it anymore

Can it be possible that webpack somhow changes the classNames when running the "react-build-script"? I don't know how to disable this.

Dyvd
  • 57
  • 6
  • When you say classNames do you mean the value of a property called "name" that exists in an instance of a class? Or do you mean the react syntax className that we use to describe the css-classes of a HTML element? – Vitor EL Mar 11 '22 at 19:16
  • I mean the value of a property called name that exists in an instance of a class – Dyvd Mar 11 '22 at 19:22
  • I don't know the specifics of your build but Webpack will minify your code so human-readable names might turn into things like "n". There's another question that asks how to disable minification in react https://stackoverflow.com/questions/55165466/how-to-build-a-production-version-of-react-without-minification but I don't think it's a good idea. Would something like this work for you? : child.type.prototype instanceof Form – Vitor EL Mar 11 '22 at 20:02
  • @VitorEL no, unfortunately not. You can't check if a class is an instance of a class. – Dyvd Mar 11 '22 at 20:16
  • 1
    prototype is not a class it's an object. I don't know why this isn't working, it works with plain JS. either way, they should have the same prototype so this does work: https://www.codepile.net/pile/qgy4Rem7 – Vitor EL Mar 11 '22 at 21:28
  • or child.type === Form , that seems easier – Vitor EL Mar 11 '22 at 21:40
  • comparing with child.type.prototype and Form.prototype worked. Thanks a lot! – Dyvd Mar 12 '22 at 11:30

0 Answers0