score:2
you need a component that map
s over the data and returns the collection of inputtext
s. 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>
);
}
}
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>
);
}
}
Source: stackoverflow.com
Related Query
- React.js - Create input elements from JSON schema
- Create dynamic Yup validation schema from JSON
- Render React Native Elements from JSON
- Should I ignore React warning: Input elements should not switch from uncontrolled to controlled?
- How to create React components from a JSON array?
- React Hook useEffect to fetch data from local json file to create a details page
- React js create a download file from a json response from API
- Create react app with i18next - load translations from json file
- React JS Unexpected end of JSON input error when binding data from an API
- How to create a controlled input from scratch in React
- Set React state from JSON to display HTML elements
- How can i stop input elements from switching to from uncontrolled to controlled and vice versa using react hooks?
- Use specific elements from JSON data and display it on a React page?
- Typescript error: Create Alpha from RGBA as an Input with type number, not a string while using React JS?
- How to access input elements from a React function
- Create React Svg from an array of elements
- Loop through array in React and create elements (not list items) from it
- Get items by name from JSON based on user input id react
- create table from JSON object in react
- Create an array from two input fields in React
- how to render table from json input react
- How to create HTML elements from an object in typescript using react
- How to set elements from a json file into a React component
- How to set dynamic attributes in React Input Component from json props
- How do I create a table from a JSON object in React JS?
- loading json data from local file into React JS
- React + Redux - Input onChange is very slow when typing in when the input have a value from the state
- How can I get input radio elements to horizontally align in react [material-ui]?
- Create an instance of a React class from a string
- Set React Input Field Value from JavaScript or JQuery
More Query from same tag
- TypeScript - Combine two interfaces and making some of its members mandatory
- How to define props on framer-motion styled-component? (PSA)
- Updating State Object Does Not Rerender Dynamically Created Component
- How to solve this error Can not find utils in context
- Importing scoped bootstrap css
- Firebase authentication with localId / idToken (instead of email / password)
- How to call axios on submit button in react-dropzone?
- react jest unit test case TypeError: Cannot read property 'then' of undefined
- Material UI: File Upload using ButtonBase
- useEffect of children component called before useEffect of parent
- Can I unify children's props interfaces into a single parent interface?
- localization in react.js suggestions and example
- Add button inside Input field ReactJS
- React App suddenly stopped working; TypeError: Cannot read properties of undefined (reading 'prototype')
- Combine arrays and merge keys together for table output
- How can I keep input values of React Material UI multiple select after refreshing/reloading the page?
- React d3.Select is there any way to do this?
- SVG scale animation slow on iOS
- Error: Too many re-renders. React limits the number of renders to prevent an infinite loop. React js
- Set component's props dynamically
- How to sort an array of objects with alphabets first and then with numbers in react
- Jest error with not transpiled node module
- How to get middlewares from getDefaultMiddleware without deprecation message
- How to handle two inputs which depend on each other?
- React/Express - required props 'undefined' in match/RouterContext
- Using Ag-grid with object of nested objects
- How to use boolean assignment in ternary operator if optional prop is an array in TypeScript
- React, form refreshing issue
- Redux-React app: How to remake my app that instead of mapStateToProps and matchDispatch there were useSelector and useDispatch?
- Array created in a Redux thunk is not being passed properly to the State tree