We Keep Coding

Strange behavior of inputs during pagination

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;

How clear form after submit

I made some little project with adding element to DOM. It's working but I don't know how to clear form after submit. I need to assign a blank value? At what point? Sorry, Im new, please don't bite. Thanks.
const addElement = (e, node, txt, attr, value) => {
e.preventDefault();
const element = document.createElement(node);
if(txt){
const text = document.createTextNode(txt);
element.appendChild(text);
}
if(attr){
element.setAttribute(attr, value)
}
document.querySelector('.content').appendChild(element);
}
const addForm = document.querySelector('.form--add');
addForm.addEventListener('submit', (e) => addElement(
e,
addForm.elements.node.value,
addForm.elements.text.value,
addForm.elements.attr.value,
addForm.elements.value.value,
));
<div class="form-container">
<form class="form form--add">
<h1 class="form__title">Add element to DOM</h1>
<input type="text" class="form__input" name="node" placeholder="element html" required>
<input type="text" class="form__input" name="text" placeholder="txt in element html">
<input type="text" class="form__input" name="attr" placeholder="attr" required>
<input type="text" class="form__input" name="value" placeholder="attr value" required>
<button class="form__button">Add element</button>
</form>
<form class="form form--search">
<h1 class="form__title">Search DOM</h1>
<input type="text" class="form__input" placeholder="szukana nazwa elementu" required>
<input type="submit" class="form__button" value="znajdź i pokaż informacje">
</form>
</div>
<div class="result"></div>
<div class="content"></div>
<footer class="footer">Stopka</footer>
<script src="main.js"></script>
Thank you

Try addForm.reset()
or
declare an id for suppose form_id then paste below code after submit
document.getElementById("form_id ").reset();

addForm.addEventListener('submit', (e) => addElement(
e,
addForm.elements.node.value,
addForm.elements.text.value,
addForm.elements.attr.value,
addForm.elements.value.value,
addForm.getElementsByTagsName('input').forEach(el => {
el.value = ''
})
));

Not saving to local storage

I'm stuck on what I have done while playing around with the code. I had it saving to local storage but now its not. Could someone help me troubleshoot this
<form name="todoForm" action="" method="get">
Reminder : <input type="text" name="ReminderInput" id="ReminderInput"><br />
Date: <input type="datetime-local" name="DateInput" id="DateInput"><br />
Extra Information : <input type="text" name="InfoInput" id="InfoInput"><br />
<button onclick="storeValues(reminder)" type=submit>Submit</button>
</form>
<script>
function storeValues(e) {
e.preventDefault();
let storedReminders = JSON.parse(localStorage.getItem("Reminders")) || [];
const newReminderDetails = {
ReminderInput: document.getElementById('ReminderInput').value,
DateInput: document.getElementById('DateInput').value,
InfoInput: document.getElementById('InfoInput').value
}
storedReminders.push(newReminderDetails);
localStorage.setItem("Reminders", JSON.stringify(storedReminders));
console.log('storedReminders', storedReminders);
}
</script>

write event rather then reminder
<button onclick="storeValues(event)" type="submit">Submit</button>

you didn't do anything wrong but there is a tiny mistake which is we don't do click event on forms instead we using a submit event. so here is my solution
HTML Code:
<form id="todoForm" action="" method="get">
Reminder : <input type="text" name="ReminderInput" id="ReminderInput"><br />
Date: <input type="datetime-local" name="DateInput" id="DateInput"><br />
Extra Information : <input type="text" name="InfoInput" id="InfoInput"><br />
<button type=submit>Submit</button>
</form>
JS Code
function storeValues(e) {
e.preventDefault();
let storedReminders = JSON.parse(localStorage.getItem("Reminders")) || [];
const newReminderDetails = {
ReminderInput: document.getElementById('ReminderInput').value,
InfoInput: document.getElementById('InfoInput').value
}
storedReminders.push(newReminderDetails);
localStorage.setItem("Reminders", JSON.stringify(storedReminders));
console.log('storedReminders', storedReminders);
}
document.getElementById("todoForm").addEventListener("submit",storeValues );

How should I implement my Drum Machine App?

I am creating a drum machine using Reactjs. It is working good but I have some performance issue and I also want to add a audio changing interface. Currently, the app have to initialize an Audio object every time the user clicks a drum pad(too bad!!!) and I tried to add another feature of changing audio but I couldn't.. I am new to Reactjs so any help will be appreciated.
Here is my code:
const App = () => {
return (
<div className="main">
<div className="drumBox">
<h2 className="drumHeader">Drum Machine</h2>
<input type="button" value="Q" onClick={() => play(Q)} />
<input type="button" value="W" onClick={() => play(W)} />
<input type="button" value="E" onClick={() => play(E)} />
<input type="button" value="A" onClick={() => play(A)} />
<br />
<input type="button" value="S" onClick={() => play(S)} />
<input type="button" value="D" onClick={() => play(D)} />
<input type="button" value="Z" onClick={() => play(Z)} />
<input type="button" value="X" onClick={() => play(X)} />
</div>
</div>
);
};
const play = e => {
var snd = new Audio(e);
return snd.play();
};
export default App;
I am calling a play function on clicking each drum pad. As you can see, the audio object snd is initialized on each click. How should I fix this and be able to change volume?

Not sure which JavaScript audio library you are using so I can't test fully this working. Also, I am not sure if you are trying to do it in Angular or not.
However, I can show you how to do it with jQuery assuming that Audio is available.
Change your HTML to:
$(".drum").on('click', function(){
let note = $(this).val();
try{
new Audio(note);
}catch(e){
console.log("Couldn't play note: ".concat(note));
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div className="main">
<div className="drumBox">
<h2 className="drumHeader">Drum Machine</h2>
<input class="drum" type="button" value="Q" />
<input class="drum" type="button" value="W" />
<input class="drum" type="button" value="E" />
<input class="drum" type="button" value="A" />
<input class="drum" type="button" value="S" />
<input class="drum" type="button" value="D" />
<input class="drum" type="button" value="Z" />
<input class="drum" type="button" value="X" />
</div>
</div>

maybe by making each pad input a component with is Audio :
const PadInput = ({value})=>{
const a = new Audio(value)
const play = ()=>{
a.play();
}
return (
<input type="button" value={value} onClick={play} />
)
}
and using it like this :
<PadInput value="A"/>
or for only one Audio this can probably work :
class App extends React.Component{
state = {
audio : new Audio()
}
play = (sound)=>{
const {audio} = this.state;
audio.src = sound;
audio.play();
}
render(){
return (
<div className="App">
<PadInput label="A" sound={A} play={this.play}/>
</div>
);
}
}
const PadInput = ({label, sound, play})=>(
<input type="button" value={label} onClick={()=>play(sound)} />
)

How can i create input text fields dynamically in react js - JSX?

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>
);
}