We Keep Coding

Formik scroll to the first invalid section after clicking on submit button

I am using Formik in my react project, I have implemented all the validations with yup and succesfully showing the errors. One thing i want is if user clicks on submit button i want to scroll it to the section which has validation errors in it.
I tried a way but couldnt achieve it here is the code below
but it gives me error
document.getElementsByName(Object.keys(formik.errors)[0])[0].focus() is undefined
but if the first div passes validation and error is on input box it works fine
const mortgageData = [
"Estou a obter um crédito habitação",
"Quero comparar com o seguro que tenho ",
"O meu seguro renova em breve",
];
const formik = useFormik({
initialValues: {
insuranceMotive: null,
creditCapital: null,
},
onSubmit: (values) => {
console.log(values);
},
validationSchema: validationSchemaSectionOne, //schema which validates the input with the help of Yup
});
useEffect(() => {
// this is the code which i tried but the problem is my first
// field is not input, its a <CheckTable/> component which
// is a div that has text in it, so this code scrolls to input
// box and ignores the first div, even it has errors
if (!formik.isSubmitting) return;
if (Object.keys(formik.errors).length > 0) {
document.getElementsByName(Object.keys(formik.errors)[0])[0].focus();
}
}, [formik]);
return (
<div className="firstSection">
<form onSubmit={formik.handleSubmit}>
<p className="tab-text">
Porque estás á procura de um Seguro Vida Crédito Habitação?
</p>
<div className="selectable-tags-mortgage">
{mortgageData.map((tag, index) => (
<CheckableTag
tag={tag}
key={index}
setValue={(val) => formik.setFieldValue("insuranceMotive", val)}
value={formik.values.insuranceMotive}
/>
))}
</div>
{formik.errors.insuranceMotive && formik.touched.insuranceMotive && (
<div className="formik-errors">{formik.errors.insuranceMotive}</div>
)}
<p className="tab-text">Qual o capital em € a cobrir pelo seguro? </p>
<Input
size="large"
name="creditCapital"
className="input-credit-capital"
value={formik.values.creditCapital}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
/>
{formik.errors.creditCapital && formik.touched.creditCapital && (
<div className="formik-errors">{formik.errors.creditCapital}</div>
)}
<button type="submit" className="button-enabled">
CONTINUAR
</button>
</form>
</div>
);
}
CheckableTag component
export default function CheckableAntTag({ tag, value, setValue }) {
const { CheckableTag } = Tag
return (
<CheckableTag
style={{
backgroundColor: tag === value ? '#AACECD' : 'white'
}}
className="selectable-ant-tags"
key={tag}
checked={tag === value}
onChange={() => setValue(tag)}>
{tag}
</CheckableTag>
)
}
So if insuranceMotive is null, its an error as i have added required to that field, the error message gets logged successfully but i want to scroll to the CheckableTag section instead of input

Instead of using
Object.keys(formik.errors)[0])[0].focus()
you should use
Object.keys(formik.errors)[0])[0].scrollIntoView({ block: 'center'})
Object.keys(formik.errors)[0])[0].focus({ preventScroll: true})

error in the usestate or in the uuid library?

I'm doing a project to manage patient appointments and everything was fine until I installed the 'uuid' library, the library didn't give me a problem, but from then on it gave me this error, apparently it is with the useState but not I find it, I thank you in advance!
error image...
enter image description here
import React, { Fragment, useState } from 'react';
import { v4 as uuidv4 } from 'uuid';
const Form = () => {
//creando el State para las citas
const [ cita, actualizarCita ] = useState({
mascota: '',
propietario: '',
fecha: '',
hora: '',
sintomas: ''
});
const [ error, actualizarError ] = useState(false)
// funcion que se ejecutara cada vez que el usuario escribe en el input para validar lo que hace
const actualizarState = e => {
actualizarCita({
...cita,
[e.target.name]: e.target.value
})
}
// Extraer los valores de cita
const { mascota, propietario, fecha, hora, sintomas } = cita;
// Cuando el usuario envia el formulario
const submitCita = e => {
e.preventDefault();
// Validacion
if(mascota.trim() === '' || propietario.trim() === '' || fecha.trim() === '' || hora.trim() === '' || sintomas.trim() === ''){
actualizarError(true);
return;
}
}
// Eliminando el mensaje previo
actualizarError(false);
// Asignando un ID
cita.id = uuidv4();
return (
<Fragment>
<h2> Crear Cita </h2>
{ error ? <p className="alerta-error">Todos los campos son obligatorios</p> : null }
<form
onSubmit={submitCita}
>
<label>Nombre Mascota</label>
<input
type="text"
name="mascota"
className="u-full-width"
placeholder="Nombre Mascota"
onChange={actualizarState}
value={mascota}
/>
<label>Nombre Dueño </label>
<input
type="text"
name="propietario"
className="u-full-width"
placeholder="Nombre dueño de la mascota"
onChange={actualizarState}
value={propietario}
/>
<label>Fecha </label>
<input
type="date"
name="fecha"
className="u-full-width"
onChange={actualizarState}
value={fecha}
/>
<label>Hora </label>
<input
type="time"
name="hora"
className="u-full-width"
placeholder="Nombre dueño de la mascota"
onChange={actualizarState}
value={hora}
/>
<label>Sintomas</label>
<textarea
className="u-full-width"
name="sintomas"
onChange={actualizarState}
value={sintomas}
></textarea>
<button
type="submit"
className="u-full-width button-primary"
>Agregar Cita</button>
</form>
</Fragment>
)
}
export default Form;

you can't update state out side function,
actualizarError(false);
you should remove this, otherwise infinite re-render

It's hard to be sure what the problem might be without a proper sandbox (codesandbox for example).
But the error seems to indicate that you've gotten stuck in an infinite loop, which usually means the component is cause its own state dependencies to change, which causes a redraw (which again causes a change, etc.)
I'd start by moving
// Eliminando el mensaje previo
actualizarError(false);
into
const actualizarState = e => {
actualizarCita({
...cita,
[e.target.name]: e.target.value
})
}

how to switch language from an array with react hooks

i want to change the language of a quote, from French to English or inverse when i click on "lang button", the quote is generate randomly from an array when the page start.
this is my array:
const quoteData = [
{
quoteEn:
"Three things cannot be long hidden: the sun, the moon, and the truth.",
quoteFr:
"Trois choses ne peuvent pas être cachées longtemps : le soleil, la lune et la vérité.",
author: "Buddha"
},
{
quoteEn:
"We make a living by what we get, but we make a life by what we give.",
quoteFr:
"On vit de ce que l’on obtient. On construit sa vie sur ce que l’on donne.",
author: "Winston Churchill"
}
export default quoteData;
and this is what i tried:
import React, { useState } from "react";
import quoteData from "./components/quoteData";
import "./App.css";
import { ReactComponent as Github } from "./icons/github-brands.svg";
function App() {
const getRandomQuotes = () => {
const randNumb = Math.floor(Math.random() * quoteData.length);
return quoteData[randNumb];
};
const [quote, setQuote] = useState(getRandomQuotes());
const [author, setAuthor] = useState(getRandomQuotes().author);
const [lang, setLang] = useState("En");
const [nextBtn, setNextBtn] = useState("Next");
const handleClickLang = () => {
if (lang === "Fr") {
setLang("En");
setNextBtn("Next");
setQuote(quote.quoteFr);
} else {
setLang("Fr");
setNextBtn("Suivant");
setQuote(quote.quoteEn);
}
};
return (
<div id="quote-box">
<div className="c1">
<div className="lang">
<button onClick={handleClickLang} className="changeLang">
{lang}
</button>
</div>
<div className="card flow">
<p id="text">{quote}</p>
<p id="author">{author}</p>
</div>
</div>
<div className="c2">
<Github id="github" />
<button onClick={handleClickRandomQuote} id="new-quote">
{nextBtn}
</button>
</div>
</div>
);
}
export default App;
and i get this error : Error: Objects are not valid as a React child (found: object with keys {quoteEn, quoteFr, author}).

You are storing in your quote state an object (the one you randomly select from your array of quoteData), not the string for the quote. This is not bad, as you also want to show the author of the random quote you randomly selected.
Also, when you do:
const [quote, setQuote] = useState(getRandomQuotes());
const [author, setAuthor] = useState(getRandomQuotes().author);
You have to take into account that the first execution of getRandomQuotes will return a random quote that doesn't have to coincide with the second call to getRandomQuotes to get the author. This could cause that your data (quote and author) are not in sync.
So, it seems that storing the author separately from the quote is not necessary. Taking all this into account, you could do something like:
function App() {
const getRandomQuotes = () => {
const randNumb = Math.floor(Math.random() * quoteData.length);
return quoteData[randNumb];
};
const [quote, setQuote] = useState(getRandomQuotes());
const [lang, setLang] = useState("En");
const [nextBtn, setNextBtn] = useState("Next");
const handleClickLang = () => {
if (lang === "Fr") {
setLang("En");
setNextBtn("Next");
} else {
setLang("Fr");
setNextBtn("Suivant");
}
};
return (
<div id="quote-box">
<div className="c1">
<div className="lang">
<button onClick={handleClickLang} className="changeLang">
{lang}
</button>
</div>
<div className="card flow">
<p id="text">{quote[`quote${lang}`]}</p>
<p id="author">{quote.author}</p>
</div>
</div>
<div className="c2">
<Github id="github" />
<button onClick={handleClickRandomQuote} id="new-quote">
{nextBtn}
</button>
</div>
</div>
);
}

PubSub returning false on publish

I'm using PubSub to globalize some states on my React application. I've a "Home" and a "Escolas" Component, "Escolas" is already using PubSub to share his status with a Component called "Filters". Works fine.
But now, my user starts the application on "Home", there, he enter a name on some input and I want to save this value on a topic of PubSub, but when I try to publish, the return is false.
setEscola(collection, e) {
this.setState({ escola: e });
var isPublished = PubSub.publish('escola-filtro', collection);
console.log(isPublished);
}
This is my entire Component:
import React, { Component } from 'react';
import PubSub from 'pubsub-js';
import lupa from '../../img/lupa.png';
import { Link } from 'react-router-dom';
import MenuHome from '../MenuSuperior/MenuHome';
import { listarEscolas } from '../../services/escolas';
import SelectAutocomplete from '../Inputs/SelectAutocomplete';
export default class Home extends Component {
constructor(props) {
super(props);
this.state = {
escola : '',
escolas : []
}
this.setEscola = this.setEscola.bind(this);
this.testeEstado = this.testeEstado.bind(this);
}
componentDidMount() {
listarEscolas().then(
lista => {
let escolas = [];
lista.results.forEach(function(escola) {
escolas.push({value : escola.codesc, label : escola.nomesc })
});
this.setState({ escolas : escolas });
}
)
}
componentWillMount() {
PubSub.clearAllSubscriptions();
}
buscarEscolas = (e) => {
if (e.target.value.length >= 3) {
let escolas = [];
listarEscolas(e.target.value).then(
lista => {
lista.results.forEach(function(escola) {
escolas.push({value : escola.codesc, label : escola.nomesc });
});
this.setState({ escolas : escolas });
}
)
}
}
setEscola(collection, e) {
// this.setState({ escola: e });
// var isPublished = PubSub.publishSync('escola-filtro', collection);
// console.log(isPublished);
}
testeEstado(event) {
console.log(event.target.value);
var isPublished = PubSub.publishSync('filtro', event.target.value);
console.log(isPublished);
}
render() {
return(
<div>
<MenuHome />
<div className="w-100 mapa-home">
<div className="container d-flex justify-content-center">
<div className="col-lg-5 text-center position-absolute conteudo">
<h2>Aqui você encontra todas as informações sobre sua escola</h2>
<div className="form-group mt-4">
<input type="text" className="form-control form-control-lg" onChange={this.testeEstado} />
<SelectAutocomplete
value={this.state.escola}
collection={this.state.escolas}
className="form-control form-control-lg rounded-pill shadow m-90 d-inline-block"
placeholder="Encontre sua escola pelo nome ou bairro"
onChange={this.setEscola}
onKeyDown={this.buscarEscolas}
/>
<Link className="btn btn-light d-inline-block ml-1" to="/escolas"><img src={lupa} alt="Buscar" /></Link>
</div>
</div>
</div>
</div>
</div>
);
}
}

Try this:
async function testeEstado(event) {
console.log(event.target.value);
var isPublished = await PubSub.publishSync('filtro', event.target.value);
console.log(isPublished);
}
The Async Await model should work for what you are trying to test here. I am uncertain if it will solve the issues if they are more underlying though.

method .map when running item.url stay with the last url on every iteration of the view while keeping changes from each of it

I'm trying to iterate on a group of elements, so far they iterate on render return, but for some reason when trying to use item.url on but the elements stay with the last item.url path had read. how can make that each iteration use its own item.url instead just the last one from the array of objects.
On line 53 of ./CategoriesListContainer.jsx
class CategoriesListContainer extends React.Component {
state = {
redirect: false,
}
setRedirect = () => {
this.setState({
redirect: true
})
}
render (){
const ItemsApp =[
{
url: '/mail',
title: 'Mailing',
description: 'Esto es una descripcion de la carta a usar para el CSV mailing.',
buttonClass: 'btn-success',
},
{
url: '#',
title: 'Excels',
description: 'Esto es una descripcion de la carta a usar para otros modulos.',
buttonClass: 'btn-success',
},
];
return(
<SectionWrapper sectionTitle='Categories'>
{ ItemsApp.map(Item => {
return (
<CardWrapper
key={ Item.title }
customClass='card'
description={ Item.description }
title={ Item.title }
>
{ this.state.redirect ? <Redirect to={ Item.url }/>: null }
<Button onButtonClick={ this.setRedirect } customClass={ Item.buttonClass } title='Entra aqui' />
</CardWrapper>
);
})}
</SectionWrapper>
);
}
};
export default CategoriesListContainer;
I expect to click on each of the buttons and get to the page defined for its URL variable.

In general you want something like this:
import React, { Component } from 'react';
import { render } from 'react-dom';
class App extends Component {
state = {
items: [{ name: 'Colin' }, { name: 'Ricardo' }]
}
handleClick = (name) => {
console.log(name)
}
render() {
const { items } = this.state;
return (
<ul>
{items.map(item => (
<li
key={item.name}
onClick={() => this.handleClick(item.name)}>
{item.name}
</li>
))}
</ul>
)
}
}
render(<App />, document.getElementById('root'));
Live example here.