.querySelector
вместо этого создайте хук useState
храните в нем ваше значение и используйте переменную где хотите. При необходимых ситуациях можно и изменять это значениеconst [ text, setText ] = React.useState('Text1');
<h3 className='text'>{text}</h3>
setText('новый текст');
useState
или useEffect
то можно и не подключать Очень странным мне кажется такой подход.
const [value, setValue] = useState('');
const [text, setText] = useState('');
const handleChange = (e) => setValue(e.target.value);
const handleClick = () => setText(value);
<p>{text}</p>
<input type="text" onChange={e => setForm({ ...form, login: e.target.value })} />
<input type="text" onChange={e => setForm({ ...form, password: e.target.value })} />
import React, { useState } from 'react';
const SelectTaxon = (props) => {
const [isShown, setIsShown] = useState(true);
const toggleFIeldset = () => setIsShown(!isShown);
let selectTaxonCheckbox = props.selectTaxonData.map((input) => (
<InputCheckbox
id={input.id}
htmlFor={input.htmlFor}
title={input.title} />
))
return (
<div className={styles.taxon}>
<h2 className={styles.h2} onClick={toggleFIeldset}>Назва Таксону</h2>
{isShown &&
<fieldset className={styles.fieldset + ' ' + styles.fieldsetActive}>
<legend className={styles.legend}>Охоронний статус</legend>
{selectTaxonCheckbox}
<legend className={styles.legend + ' ' + styles.legendTaxon}>
Джерело даних
</legend>
</fieldset>
}
</div>
)
}
AnswersList/AnswersList.js
неправилно импортирван реактimport React from 'react';
const [num, setNum] = useState(0);
const [text, setText] = useState('no');
const [textUpper, setТextUpper] = useState('HELLO');
const changeState = () => {
setNum(num + 1);
setText('yes');
setТextUpper('BYE');
}
const [data, setData] = useState({
num: 0,
text: 'no',
textUpper: 'HELLO'
});
import React from 'react';
import { Route, Redirect, useLocation } from 'react-router-dom';
export const PrivateRoute = (props) => {
const token = localStorage.getItem("myToken");
const location = useLocation();
if (token) {
return <Route {...props} />
}
return (
<Redirect to={{ pathname: '/', state: { from: location } }} />
);
};
// Use Private Route
import { PrivateRoute } from './PrivateRoute';
import { Home } from './Home';
<PrivateRoute path="/home">
<Home />
</PrivateRoute>
Допустим Logo(js\css) перекинуть в папку Logo и тд
В свое время читала на хабре что некоторые разработчики создают одну папку Header, и сваливают туда все компоненты
import React, { useEffect } from 'react';
export default function GetContent() {
const GetData = () => {
...
};
useEffect(() => {
GetData().then(res => console.log(res));
}, []);
return (
<div>
</div>
)
}
return (
{
this.state.table.map(row => {
return <TableRow row={row}/>
})
}
)
function TableRow(props) {
return(
<tr>
props.row.map(cell => {
<td><TableCell /></td>
})
</tr>
)
}
fetchData = () => {
fetch(`https://........`)
.then((response) => response.json())
.then((data) => {
const groupedData = data.group;
this.setState({
data: groupedData,
car: Object.keys(groupedData)[0]
}, this.filter);
})
.catch(() => {
console.log("404 Not Found");
});
};