score:2

Accepted answer

you need a component that maps over the data and returns the collection of inputtexts. here i've called it main.

class main extends react.component {
  render() {

    // map over the data and return the completed component
    // on each iteration pass in the object data as `params`.
    // you can deconstruct this in the `inputtext` component
    return data.map((input, i) => {
      return <inputtext key={i} params={input} />
    });
  }
}

now you can pick up those params in the component by deconstructing this.props.params and using those variables to fill out the component.

class inputtext extends react.component {

  constructor(props) {
    super(props);
    this.changevalue = this.changevalue.bind(this);
  }

  changevalue() {
    console.log('placeholder to prevent bug');
  }

  render() {

   // use destructuring to grab the individual properties from params
   const { type, name, classname, placeholder } = this.props.params;

    // use those properties in the returned component elements
    return (
      <div classname={classname}>
        <label htmlfor={name}>test</label>
        <input
          onchange={this.changevalue}
          name={name}
          type={type}
          placeholder={placeholder}
        />
      </div>
    );
  }
}

demo

score:0

assuming the json you want to iterate through is provided in an array you could do something like this. it will create a label and input element for each json.

render() {
  return (
    <div classname={classname}>
      {
      this.props.yourarray.map(value=>(
        <label htmlfor={value.name}>{value.title}</label>
        <input
          onchange={this.changevalue}
          name={value.name}
          type={value.type}
          value={value.value}
        />
      ))
      }
    </div>
  );
}

score:1

inputtext.jsx

upon interaction each inputtext will raise onchange saying which input field was edited and what is its current value.

import * as react from 'react';

export class inputtext extends react.component {
  onchange = (e) => {
    const {onchange, name} = this.props;
    const {value} = e.target;
    if (onchange) {
      onchange(name, value);
    }
  }

  render() {
    const {name, title, type, placeholder, classname, value} = this.props;
    return (
      <div classname={classname}>
        <label htmlfor={name}>{title}</label>
        <input
          placeholder={placeholder}
          name={name}
          type={type}
          value={value}
          onchange={this.onchange}
        />
      </div>
    );
  }
}

form.jsx

here we maintain the state of all inputs. the weird reduce is done to initialise the shape of the state with the input names being the object properties.

// initial state
{
  "firstname": "",
  "surname": ""
}

upon edit this.setstate({[name]: value}) the associated property gets updated.

import * as react from 'react';
import { inputtext } from './inputtext';

const inputs = [{
  "type": "text",
  "title": "some title",
  "name": "firstname",
  "class": "text",
  "placeholder": "enter first name"
}, {
  "type": "text",
  "title": "some other title",
  "name": "surname",
  "class": "text",
  "placeholder": "enter surname"
}];

export class form extends react.component {
  constructor(props) {
    super(props);
    this.state = inputs.reduce((acc, input) => {
      return {...acc, [input.name]: ''};
    }, {})
  }

  onchange = (name, value) => {
    this.setstate({[name]: value});
  }

  render() {
    const list = inputs.map(input => {
      return (
        <inputtext
          value={this.state[input.name]}
          key={input.name}
          type={input.type}
          name={input.name}
          title={input.title}
          classname={input.class}
          placeholder={input.placeholder}
          onchange={this.onchange}
      />
      );
    });

    return (
      <form>
        {list}
      </form>
    );
  }
}

Related Query

More Query from same tag