I'm pretty new to reactjs, i came across a scenario where i've to create 6 input fields which are very much similar to each other. Right now i've something like this in my render method of class,
render () {
return (
<div>
<p>
<label htmlFor="answer1">Answer:</label><br/>
<input
type="text"
name="answer1"
id="answer1"
className="answer"
value={this.state.answer1}
onChange={this._handleChange}
/>
</p>
<p>
<input
type="text"
name="answer2"
id="answer2"
className="answer"
value={this.state.answer2}
onChange={this._handleChange}
/>
</p>
<p>
<input
type="text"
name="answer3"
id="answer3"
className="answer"
value={this.state.answer3}
onChange={this._handleChange}
/>
</p>
<p>
<input
type="text"
name="answer4"
id="answer4"
className="answer"
value={this.state.answer4}
onChange={this._handleChange}
/>
</p>
<p>
<input
type="text"
name="answer5"
id="answer5"
className="answer"
value={this.state.answer5}
onChange={this._handleChange}
/>
</p>
<p>
<input
type="text"
name="answer6"
id="answer6"
className="answer"
value={this.state.answer6}
onChange={this._handleChange}
/>
</p>
</div>
);
}
The code is ugly and redundant, is there anyway i could do this dynamically?
How about defining an Answer component like this (only showing the render method):
render() {
return (
<p>
<label htmlFor={this.props.name}>Answer:</label>
<input
type="text"
name={this.props.name}
className="answer"
value={this.props.value}
onChange={this.props.handleChange}
/>
</p>
);
}
And then on your parent component you just import it and use it like:
var Answer = require('./answer.js');
//..
render() {
return (
<div>
<Answer name="answer1" value={this.state.answer1} handleChange={this._handleChange} />
<Answer name="answer2" value={this.state.answer2} handleChange={this._handleChange} />
<Answer name="answer3" value={this.state.answer3} handleChange={this._handleChange} />
// add all your Answer components
</div>
);
}
Following Thylossus suggestion, here is an example using map:
var Answer = require('./answer.js');
//...
render() {
// this is supposing you've got an answers array of { name: ..., value: ...} object
var answers = this.state.answers.map(function(a) {
return(<Answer name={a.name} value={a.value} handleChange={this._handleChange} />)
});
return (
<div>
{ answers }
</div>
);
}
Related
function myFunction()
{
alert(document.getElementById("myname").value+','+document.getElementById("myphone")+','+document.getElementById("mycountry")+','+document.getElementById("myemail"));
}
it seems pretty straightforward to me
I just refactor a bit your function
function myFunction() {
const message = ['myname', 'myphone', 'mycountry', 'myemail']
.map(id => document.getElementById(id).value)
.join(',')
alert(message);
}
<div>
<input id="myname" placeholder="myname" />
<input id="myphone" placeholder="myphone" />
<input id="mycountry" placeholder="mycountry" />
<input id="myemail" placeholder="myemail" />
</div>
<div>
<button onclick="myFunction()">Show alert</button>
</div>
Example Form So Far
This is my current code that works, without any checkbox handling started.
import React, { useState } from "react";
import "../admin/SysHealthForm.scss";
export default function SysHealthForm() {
const [input, setInput] = useState({
header: "",
content: "",
eta: "",
});
//When any change is registered, update the Name + Value with target.
//Return previous text and display as name: entered value
function handleChange(e) {
const { name, value } = e.target;
setInput((prevInput) => {
return {
...prevInput,
[name]: value,
};
});
}
//Stop Page Refreshing and Console.log the JSON
function handleClick(e) {
e.preventDefault();
console.log(input);
}
return (
<div className="widgit-syshealth">
<h2>System Health</h2>
<form>
<input
name="header"
placeholder="Header"
autoComplete="off"
onChange={handleChange}
value={input.header}
required
></input>
<textarea
name="content"
placeholder="Message"
autoComplete="off"
onChange={handleChange}
value={input.content}
required
></textarea>
<div className="form-school-check">
<div>
<input type="checkbox" id="syshpcb1" value="Fosseway"></input>
<label htmlFor="syshpcb1">Fosse Way</label>
</div>
<div>
<input type="checkbox" id="syshpcb2" value="Mendip"></input>
<label htmlFor="syshpcb2">Mendip</label>
</div>
<div>
<input type="checkbox" id="syshpcb3" value="Nunney"></input>
<label htmlFor="syshpcb3">Nunney</label>
</div>
<div>
<input type="checkbox" id="syshpcb4" value="Hayesdown"></input>
<label htmlFor="syshpcb4">Hayesdown</label>
</div>
<div>
<input type="checkbox" id="syshpcb5" value="Moorlands"></input>
<label htmlFor="syshpcb5">Moorlands</label>
</div>
<div>
<input type="checkbox" id="syshpcb6" value="Cameley"></input>
<label htmlFor="syshpcb6">Cameley</label>
</div>
<div>
<input type="checkbox" id="syshpcb7" value="St Mary's"></input>
<label htmlFor="syshpcb7">St Mary's</label>
</div>
<div>
<input type="checkbox" id="syshpcb8" value="Other"></input>
<label htmlFor="syshpcb8">Other</label>
</div>
</div>
<input
placeholder="ETA For Fix"
onChange={handleChange}
value={input.eta}
name="eta"
></input>
<button type="Submit" onClick={handleClick}>
Submit
</button>
</form>
</div>
);
}
At The Moment, when you submit the data. It logs the header, content and eta etc correctly
but i want it to essentially create an Array of all the checkboxes that are ticked.
I just don't know where i would even begin..
Will be pushing the data back up to a MongoDB Atlas database once recieved.
Thanks
For some reason, when switching to Registration, the 3rd input "inherits" the value from the previous state, that is, in theory, it should not have a value, but nevertheless an equal Login appears. How to fix?
import React, { useState } from 'react';
function Auth() {
const [pagination, setPagination] = useState('log');
function pag() {
if (pagination === 'log') {
return (
<>
<input
type="text"
className="email"
placeholder="E-mail"
/>
<input
type="text"
className="password"
placeholder="Пароль"
/>
<input
type="button"
className="done"
value="Войти"
/> // From here is transmitted
</>
);
}
return (
<>
<input
type="text"
className="email"
placeholder="E-mail"
/>
<input
type="text"
className="password"
placeholder="Пароль"
/>
<input
type="text"
className="password password-repeat"
placeholder="Повторите пароль"
/> // To here
<input
type="button"
className="done"
value="Зарегестрироваться"
/>
</>
);
}
function changePag(ev) {
if (ev.target.dataset.type === 'log') {
setPagination('log');
} else {
setPagination('reg');
}
}
return (
<div className="auth_page">
<div className="pagination">
<input
type="button"
className="log"
data-type="log"
onClick={changePag}
value="Вход"
/>
<input
type="button"
className="reg"
data-type="reg"
onClick={changePag}
value="Регистрация"
/>
</div>
<div className="form">
{pag()}
</div>
</div>
);
}
export default Auth;
I have a render function in the component which is responsible to render a controls on page. So far it is working fine.
render()
{
render
(
{this.state.Inputs.map(input => {
if (input.CODE === "VARIABLE") {
return (
<div className="row p-1">
<div className="col-sm-4">
<label>
<b>{input.LABEL_NAME}</b>
</label>
</div>
<div className="col-sm-6">
{this.renderControl(input.WIDGET_TYPE)}
<br />
</div>
</div>
);
}
})
)
}
and below is my renderControl() function. I want to generate unique ids for each control when I am rendering it on page. I am not sure how to do this. Could you please help. Thanks in advance.
renderControl = controlName => {
switch (controlName) {
case "INTEGER":
case "TEXTBOX":
case "MEDIUM_TEXTBOX":
case "NUMBER":
return <input type="text" width="70%" className="txtSize" />;
case "DROPDOWN":
case "DIALOG":
return <Dropdown />;
case "DATE":
return (
<DatePicker
selected={this.state.startDate}
onChange={this.handleChange}
/>
);
case "DIALOG":
return <Dropdown />;
case "BOOLEAN":
return (
<div className="some-class">
<input type="radio" className="radio" name="x" value="y" id="y" />
<label htmlFor="y">Yes</label>
<input type="radio" className="radio" name="x" value="z" id="z" />
<label htmlFor="z">No</label>
</div>
);
default:
return;
}
};
Change these 4 lines:
this.state.Inputs.map((input, index) =>
{this.renderControl(input.WIDGET_TYPE, index)}
renderControl = (controlName, index)
return <input type="text" key={index} width="70%" className="txtSize" ></input>;
Pass a unique identifier from the input object, assuming LABEL_NAME is unique.
If not then pass the index from the map function.
{this.state.Inputs.map((input, index) => {
if (input.ROW_CLASS_CODE === "MODEL_VARIABLE") {
return (
<div className="row p-1" key={input.LABEL_NAME}> // Change this line
<div className="col-sm-4">
<label>
<b>{input.LABEL_NAME}</b>
</label>
</div>
<div className="col-sm-6">
{this.renderControl(input.WIDGET_TYPE)}
<br />
</div>
</div>
);
}
change your code to the following
render()
{
render
(
{this.state.Inputs.map((input,key) => {
if(input.ROW_CLASS_CODE === "MODEL_VARIABLE"){
return (
<div className="row p-1">
<div className="col-sm-4">
<label ><b>{input.LABEL_NAME }</b></label>
</div>
<div className="col-sm-6">
{this.renderControl(input.WIDGET_TYPE,key)}
<br></br>
</div>
</div>
)
}
})
)
}
renderControl = (controlName,key) =>{
switch(controlName) {
case 'INTEGER_FIELD':
case 'SMALL_TEXTBOX':
case 'PERCENTAGE':
case 'MEDIUM_TEXTBOX':
case 'REAL_NUMBER':
case 'MONEY':
return <input type="text" key={key} width="70%" className="txtSize" ></input>;
case 'NARROW_DROPDOWN':
case 'SELECTION_DIALOG':
return (<Dropdown key={key}></Dropdown>);
case 'DATE_FIELD':
return (<DatePicker key={key}
selected={this.state.startDate}
onChange={this.handleChange}
/>)
case 'SELECTION_DIALOG':
return <Dropdown key={key}></Dropdown>;
case 'BOOLEAN_FIELD':
return (<div className="some-class" key={key}>
<input type="radio" className="radio" name="x" value="y" id="y" />
<label htmlFor="y">Yes</label>
<input type="radio" className="radio" name="x" value="z" id="z" />
<label htmlFor="z">No</label>
</div>);
default:
return ;
}
}`
Ok so I am making a "buzzfeed" quiz generator and I am having an issue with a piece of my form. So for each question made there are two different parts, a "Question" and the "Answers". There will always be 4 answers but I want to keep track of which Answers are checked later so I would like to give each answer a unique id "question" + questionNum + "Answer" + answerNum or "question" + questionNum + "Answer" + i So I made this answersGenerator function that is supposed to give me 4 unique answer choice fill ins for the user to input answers for that specific questions (right now it says something about terms and conditions - ignore that I ad just left it like that for now because I was following a tutorial). Here is all my code:
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import logo from './logo.svg';
import './App.css';
var questionNum = 1;
var answerNum = 1;
class App extends Component {
constructor(props) {
super(props);
this.state = {
quizTitle: "",
author: "",
question: "",
terms: false,
test: "",
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
const target = event.target;
const value = target.type === "checkbox" ? target.checked : target.value;
const name = target.name;
this.setState({
[name]: value
});
}
handleSubmit(event) {
event.preventDefault();
console.log(this.state);
}
render() {
return (
<div className="App">
<div>
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
<div className="container">
<div className="columns">
<div className="formDiv">
<form className="form" onSubmit={this.handleSubmit}>
<div className="field">
<label className="label">Give your quiz a title.</label>
<div className="control">
<input
className="input"
type="text"
name="quizTitle"
value={this.state.quizTitle}
onChange={this.handleChange}
/>
</div>
</div>
<div className="field">
<label className="label">Who's the Author?</label>
<div className="control">
<input
className="input"
type="text"
name="author"
value={this.state.author}
onChange={this.handleChange}
/>
</div>
</div>
<div className="questions" id="questions">
<div className="question" id={'questionGroup' + questionNum}>
<div className="field">
<label className="label" id={'question' + questionNum}>Question {questionNum}</label>
<div className="control">
<input
className="input"
type="text"
name='question'
value={this.state.question}
onChange={this.handleChange}
/>
</div>
</div>
<div className="answersDiv">
<label className="label">Answers</label>
<div className="field">
<div className="control">
<label className="checkbox">
{this.answersGenerator()}
</label>
</div>
</div>
</div>
</div>
</div>
<div className="field">
<div className="endButtons">
<button id="addQuestionButton"
onClick={addQuestion}>Add Question</button>
<input
type="submit"
value="Submit"
id="submitButton"
className="button is-primary"
/>
</div>
</div>
</form>
</div>
<div className="column is-3">
<pre>
<code>
<p>Quiz Title: {this.state.quizTitle}</p>
<p>Author: {this.state.author}</p>
<p>Question: {this.state.question}</p>
<p>Terms and Condition: {this.state.terms}</p>
<p>Do you test?: {this.state.test}</p>
</code>
</pre>
</div>
</div>
</div>
</div>
);
}
}
function answersGenerator () {
console.log("hello this is answer generator");
var div = document.createElement('div');
div.className = 'answers' + {questionNum};
for (var i = 1; i < 5; i++){
div.innerHTML =
'<div className="field">\
<div className="control">\
<label className="checkbox">\
<label className="label">Answers</label>\
<input\
name="terms"\
type="checkbox"\
id="question'+{questionNum}+'Answer'+{i}+'"\
checked={this.state.terms}\
onChange={this.handleChange}\
/>\
I agree to the{" "}\
terms and conditions\
</label>\
</div>';
document.getElementsByClassName('answersDiv')[0].appendChild(div)
}
}
function addQuestion () {
questionNum++;
console.log(questionNum + "that is the question number");
var div = document.createElement('div');
div.className = "questions" + questionNum;
div.innerHTML =
'<div id="questionGroup'+{questionNum}+'">\
Question '+{questionNum}+'<br />\
<input type="text" name="question'+{questionNum}+'"/><br />\
Answers<br />\
Check the box(es) for the correct answer(s).<br />\
<input type="checkbox" name="question'+{questionNum}+'Answer1Box" />\
<label for="question'+{questionNum}+'Answer1"><input type="text" name="question'+{questionNum}+'Answer1"/></label><br />\
<input type="checkbox" name="question'+{questionNum}+'Answer2Box" id= />\
<label for="question'+{questionNum}+'Answer2"><input type="text" name="question'+{questionNum}+'Answer2"/></label><br />\
<input type="checkbox" name="question'+{questionNum}+'Answer3Box" />\
<label for="question'+{questionNum}+'Answer3"><input type="text" name="question'+{questionNum}+'Answer3"/></label><br />\
<input type="checkbox" name="question'+{questionNum}+'Answer4Box" />\
<label for="question'+{questionNum}+'Answer4"><input type="text" name="question'+{questionNum}+'Answer4"/></label><br />\
</div>';
document.getElementsByClassName('questions')[0].appendChild(div)
}
export default App;
There's a few things to just ignore in here, i just wasn't sure how much info you needed. So the issue is that I get an error when I call my answersGenerator function in my render function. Here's the error Uncaught TypeError: this.answersGenerator is not a function Here's the small piece where that is
<div className="answersDiv">
<label className="label">Answers</label>
<div className="field">
<div className="control">
<label className="checkbox">
{this.answersGenerator()}
</label>
</div>
</div>
</div>
I appreciate the help, if you have any other tips for me other than this issue I am having I am all ears. I am very new at this, being js and React.
UPDATE: I have edited the answersDiv to be just this (I relized it was being called inside a checkbox)
<div className="answersDiv">
<label className="label">Answers</label>
{answersGenerator()}
</div>
I am still getting the same errors though.
You're receiving the error because the answersGenerator() isn't a method of your class App, so, you can't refer to it using this. If you want to do on that way, move you function to inside the component, like this:
class App extends Component {
// your component definition etc..
answersGenerator = () => {
// your function implementation
}
// the rest of your component
}
TIP:
If you dont want to have to always bind the function, like:
this.handleChange = this.handleChange.bind(this);
Declare your method like:
handleChange = (event) => { // the implementation }
Instead of
handleChange(event) { // the implementation }
The () => {}, known as arrow function, does the bind for your.
EDIT
You're developing with React, that supports creating HTML inside your code. So, you can create an array of answers, then, return a div with the answers mapped inside. The map will take each answer and render inside the div. Try to define your method as below:
answersGenerator => () {
console.log("hello this is answer generator");
var answers = []
for (var i = 1; i < 5; i++){
answers.push(
<div className="field">
<div className="control">
<label className="checkbox">
<label className="label">Answers</label>
<input
name="terms"
type="checkbox"
id=`question${questionNum}Answer${i}`
checked={this.state.terms}
onChange={this.handleChange}
/>
I agree to the{" "}
terms and conditions
</label>
</div>
);
}
return <div className=`answer${questionNum}`> {answers.map(answer => answer)} </div>
}
At first glance it looks like you haven't defined your answersGenerator() function within your App class.
Thus, this.answersGenerator() doesn't exist.
Try just using answersGenerator() without the this.