Как работать с данными из query?

Question

[Ольга]

Есть страница FAQ, соответсвенно там список вопросов, по клику на вопрос должен открываться ответ. Раньше было сделано так, была функция, которая при клике передавала индекс вопроса на котором клик был совершен, показывался ответе. если на этом же вопросе был повторный клик, то индекс вопроса удалялся из state и ответ скрывался.

class Questions extends PureComponent {
constructor(...args) {
		super(...args);
		this.handleOnSelectQuestion = ::this.handleOnSelectQuestion;
                this.state = {
			selectQuestion: [],
}}
handleOnSelectQuestion(question) {
this.setState(({selectQuestion}) => {
			if(selectQuestion.indexOf(question) > -1){
				return {
					selectQuestion: selectQuestion.filter(questionId => questionId !== question)
				};
			}
			return {
				selectQuestion: [... selectQuestion, question]
			};
		});
}
}

render() {
return(
<div className={styles.question_container}>
							{questionsList.map((question, index) => (
								<QuestionsCard
									key={index}
									title={question.question}
									answer={question.answer}
									onSelect={partial(this.handleOnSelectQuestion, index)}
									isOpen={selectQuestion.indexOf(index) > -1}
									index={index}
								/>
								)
							)}
						</div>
)
}

сейчас такой вариант не подходит, нужно тоже самое реализовать с помощью location.query. Не могу понять, как при клике на вопрос индекс вопроса сохранить в массиве query. Пока набросала вот такую штуку

const {location} = this.props;
const query = {...location.query, question: [...location.query.question, question]};

но в консоли индексы почему то и строчные и числовые. console.log(query.question) => take.ms/23zdM

Answer 1

[Антон Спирин]

Утилита, которой вы парсите query string, возвращает значения в виде строк. Что очевидно.
Вопрос в чем, собственно? Не знаете как string к number привести?
Можно так:

const string = '1';
const number = Number.parseInt(string);

Comments

[Ольга]

Вопрос в том, как реализовать все тоже самое, но не использую state, а используя query

[Антон Спирин]

Ольга, смотря какие вы инструменты используете для роутинга и парсинга query string?
Еще не ясно, что делает функция partial.

[Ольга]

Антон Спирин, да, query string

[Антон Спирин]

Ольга, знак вопроса случайно поставил.
смотря какие вы инструменты используете для роутинга и парсинга query string.

[Ольга]

Антон Спирин, partial это функция lodash, похожа на _.bind

[Антон Спирин]

Ольга, больше интересно, что используете для роутинга и парсинга строки. На самом деле все просто. Парсите строку, по индексу задаете элементам isOpen.
По клику на новый вопрос делаете вызов history.push({ path }); в котором вложена новая собранная строка.