score:0
Accepted answer
you probably don't want to repeat form tag for each input field. to make it work move form tag one level upper, as a wrapper. then - loop through input fields as defined in separate file. my suggestion is to add submit button separately, as a part of contactform (it has a different purpose than other fields - holds no value, etc)
import react, {component} from 'react'
import {contactdata} from './contactformdata'
import {fontawesomeicon} from "@fortawesome/react-fontawesome";
import {faarrowright} from "@fortawesome/free-solid-svg-icons";
import {library} from '@fortawesome/fontawesome-svg-core'
import './contact.css'
import './archivo-regular.ttf'
library.add(faarrowright)
class contactform extends component {
render() {
return (
<div classname="contactformcontainer">
<form>
{contactdata.map((item) => {
return (
<>
<label>{item.label}</label>
<br />
<input type={item.type} placeholder={item.placeholder} value={item.value} classname={item.class} id={item.id}/>
</>
)
})}
<button type="submit">
send message <fontawesomeicon icon={faarrowright} />
</button>
</form>
</div>
)
}
}
export default contactform;
Source: stackoverflow.com
Related Query
- How to place an icon next to a string as an input value in an array of objects (React)?
- Fetching the input value from textarea in a loop from an array of objects using reactjs. How to do so?
- Javascript how to see if two objects with array of string contain the same value
- How to update a useState which has an array, inside this array I have objects this objects will update when the input value will change in react js
- how to group array of objects by value in reactjs / javascript
- ReactJS: How do I sort an array of objects based on value of props?
- How to update specific value when the state is an array of objects - React
- Pushing New value to Array of Objects while keeping old one intact React Js Next Js
- how can i setState inside of array of objects taking user input from form
- How to map a filter of a string value in an array of strings
- How to generate an array for each input value from textBox in reactJs
- how to group array of objects by value in reactjs
- How to update a single key value pair in an array of objects in react?
- How to check If the value of an input is number or string in react js?
- How to return objects that have matching value when comparing to a separate array
- How to replica my input value to next input in React?
- How to group arrays of objects by value and add the result to another array with same value at specific key
- I'm trying to filter an array of Objects simultaneosly by number and by string value
- How to get value based on key from an array of objects javascript
- How can loop through array of JSON Object to find property value that includes user input characters
- how to update array of objects when input is changed
- How can I focus on next input when the first input value length is 3?
- Reload an array of objects depending on search input value using React Hooks
- How do I iterate over an array of objects match a common element from another array and return the key value for "name"
- how to get value of input tag in array with same attribute name in react js
- How to replace the value of an array of objects in React
- How to create a new array of objects for each String Javascript/React?
- React.js - How to change object value inside array of objects
- How to I make unique input filed value inside looped array in Reactjs?
- reactjs how to handle value change on input array properly
More Query from same tag
- Why cant set interval id in react hooks component?
- Input from a textfield autofills the other textfields based on data
- Update array item value from function results - javascript
- Change navigation styles depending on the current path Gatsbyjs
- typing a HOC component that's using both withRouter and connect
- React Native Module AppRegistry is not a registered callable module
- AXIOS PUT request returns a 200 code but doesn't update content?
- Reduce( ): Type 'number' is not assignable to type 'Item'
- React changing route breaks height with layout
- Using DraftJS in a Functional Component
- Beginner: Styling ReactJS Checkbox using CSS Pseudo Elements
- How to close Facebook Send Dialog (v2.9) automatically after completion?
- Add attribute in child element of dynamic HTML
- How to wrap soucecode in Storybook mdx file
- React ExoticComponent cannot be called
- Testing Socket.io listener in React with Enzyme
- ReactJS: Reloading component after function is executed?
- unable to edit data in reducer for put method
- Add python AI script to reactJS
- Can you make a ref not change after context change? React
- How to limit access for User and show specific menu parts?
- react-router.min.js:1 Uncaught TypeError: Cannot read property 'location' of undefined
- How to build a multi package node module with some optional modules
- How to change the default properties of a css framework as material ui
- React component Input validation (useState()) one step behind
- How to dynamically add a CSS class to a div in a component
- react js : axios fecth data using a get request condition : i want names with those values with taken: true
- How to mute/unmute remote video/audio in twilio
- React Router doesn't load images properly with nested routes
- Why Is The index A Class From A Rendered List Using map Function In React Hooks?