Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I utilize dot notation when rendering components?

I have a simple component which is supposed to render different kind of fields into my form component:

import React from "react";

export default class Field extends React.Component {

  render() {
    switch (this.props.type) {
      case 'textarea': {
        return (
          <div className="col-xs-12">
            <textarea
              placeholder={this.props.placeholder}
              name={this.props.name}
            >
            </textarea>
          </div>
          )
      }
      case 'text': {
        return (
          <div className="col-md-6 col-lg-4">
            <input
              type="text"
              placeholder={this.props.placeholder}
              name={this.props.name}
            />
          </div>
        )
      }
    }
  }
}

And I'm using this component in my form component like this:

export default class SubmitForm extends React.Component {

  render() {
    return (
        .
        .
        .
        <Field
          type="text"
          placeholder="something"
          name="something"
        />
        <Field
          type="textarea"
          placeholder="another"
          name="othername"
        />
        .
        .
        .
    )
  }
}

What I have in mind is to somehow implement my field component to be able to use dot notation as explained in Using Dot Notation for JSX components which I have seen many other libraries and I want to be able to use this component like this:

<Field.Text name="sth" placeholder="sth" />
<Field.TextArea name="other" placeholder="other stuff" /> 

But I can't do it the way mentioned in React docs. How can I do this?

like image 976
Taxellool Avatar asked Jul 05 '17 04:07

Taxellool


People also ask

How do you render a functional component?

We can create a functional component to React by writing a JavaScript function. These functions may or may not receive data as parameters. In the functional Components, the return value is the JSX code to render to the DOM tree. Example: Program to demonstrate the creation of functional components.

When rendering a list what is a key and what is its purpose?

A “key” is a special string attribute you need to include when creating lists of elements in React. Keys are used to React to identify which items in the list are changed, updated, or deleted. In other words, we can say that keys are used to give an identity to the elements in the lists.

When rendering a component component name must always?

We recommend naming components with a capital letter. If you do have a component that starts with a lowercase letter, assign it to a capitalized variable before using it in JSX.

Why does a component requires a render () method?

When the component file is called it calls the render() method by default because that component needs to display the HTML markup or we can say JSX syntax.


2 Answers

Just create individual components and export them under names:

//Field.js
class TextArea extends React.Component {
  ...
}

class Text extends React.Component {
  ...
}

export { Text, TextArea };

Then import all the names from the module:

import * as Field from './path/to/Field.js';

Or if you prefer exporting a default object like so (which is exactly what the example from the documentation is doing, just in a different way):

export default { Text, TextArea };

Which will use object shorthand properties and export a default member -- an object literal. Then you can import it like so:

import Field from './path/to/Field.js';

And finally:

<Field.TextArea ... />

Or, to get rid of dot notation (you can't do this with the default export option!):

import { Text, TextArea } from './path/to/Field.js';

<Text ... />
<TextArea ... />

Of course, going exactly by the React documentation, you could do, with class expressions:

const Field = {
  Text: class Text extends React.Component { //you can omit the class name here
    //can be stateless functional component if you don't need state
  },
  TextArea: class TextArea extends React.Component {

  }
}

export default Field;

Then importing as a default member and using dot notation.

like image 196
Andrew Li Avatar answered Sep 29 '22 18:09

Andrew Li


Simply following the docs.

const Field = {
  Text: function Text(props) {
    return <div className="col-md-6 col-lg-4">
            <input
              type="text"
              placeholder={this.props.placeholder}
              name={this.props.name}
            />
          </div>;
  },
  Textarea: function Textarea(props) {
    return <div className="col-xs-12">
            <textarea
              placeholder={this.props.placeholder}
              name={this.props.name}
            >
            </textarea>
          </div>;
  }
}

Then when your dot usage

<Field.Text placeholder="something" name="something" />
like image 35
Fuzail l'Corder Avatar answered Sep 29 '22 16:09

Fuzail l'Corder