How do edit a string with a function in React

Question

So this might sound a bit confusing but I want to get a string to make a call with an api. I want to do it in a form with multiple checkboxes. The original code will look like:

let value = "1"

so if a user clicks the number 28 check box. the string will become:

"1,28"

if the user also checks 5 the string will be:

1,28,5

If the user decides to uncheck 28 while leaving 5 checked the string will become:

1,5

That's basically the long and short of it.

I'm using React to do this project.

Edit:

This is the code for the React Dialog box with the options.

import React, { useState, useEffect } from 'react';
import { Dialog, DialogTitle, DialogContent, makeStyles } from '@material-ui/core';
import { Button, ButtonToolbar } from 'react-bootstrap';
import Grid from '@material-ui/core/Grid';
import * as FaIcons from 'react-icons/fa';
import './FilterPopup.css'
import { filterData } from './filterData';
import { genresData } from './genresData'

export default function Filter(props) {
    const { title, children, openPopup, setOpenPopup } = props;

    const [filtergenres, setFilterGenres] = useState()

    return (
        <Dialog open={openPopup} className='filterDialog' maxWidth="md">
            <DialogTitle>
                <div className='popupTitle'> Filter </div>
                <Button className='popupCloseBtn' onClick={() => { setOpenPopup(false) }}>
                    <FaIcons.FaTimes />
                </Button>
            </DialogTitle>
            <DialogContent dividers>
                <form className='pop-up-forms'>
                    <label className='popuppart'>
                        Sort By:
                        <select className='filter-sort'>
                            {filterData.map((item, index) => {
                                return (
                                    <option key={index} value={item.value}>{item.title}</option>
                                )
                            })}
                        </select>
                        <Button className='popupSearchSubmitBtn' onClick={() => { }}>
                            submit
                        </Button>
                    </label>
                    <label className='popuppart'>
                        Include Adult:
                        <input
                            className='filterchkbox'
                            name="isAdult"
                            type="checkbox" />
                    </label>
                    <label className='filterGenres'>
                        Genres:

                        <Grid container spacing={1} direction="row" justify="center" alignItems="center">
                            {genresData.map((item, index) => {
                                return (
                                    <Grid item xs={1.5} key={index}>
                                        <label className='genresLabel'>
                                            {item.title}
                                            <input
                                                className='filterchkbox'
                                                name="isAdult"
                                                type="checkbox" />
                                        </label>
                                    </Grid>
                                )
                            })}

                        </Grid>
                    </label>
                </form>
            </DialogContent>
        </Dialog >
    )
}

and here is a screenshot of what it looks like in a browser.

@sma I've added the code for the page I want to edit. I'm unsure how to even proceed that's why I asked this question to at least give me some headway. — Ndifreke James Okpo
– Ndifreke James Okpo, Commented Aug 5, 2021 at 15:33

Andy · Accepted Answer · 2021-08-05 15:04:15Z

You can use state to maintain the values of the checkboxes. Add a click handler to the parent element that captures the events from the checkboxes. You can then extract the value and checked.

If the box is checked add the value to state, making sure you sort the array first. If it's unchecked, filter out the value from the array, then sort it, and update the state.

You can use useEffect to log a string built from the array.

const { useEffect, useState } = React;

function Example() {

  const [ boxes, setBoxes ] = useState([1]);

  function handleClick(e) {
    const { value, checked, nodeName } = e.target;
    if (nodeName === 'INPUT') {
      if (checked) {
        const newState = [...boxes, +value];
        newState.sort((a, b) => a - b);
        setBoxes(newState);
      } else {
        const newState = boxes.filter(box => box !== +value);
        newState.sort((a, b) => a - b);
        setBoxes(newState);
      }
    }
  }

  useEffect(() => console.log(boxes.join(',')), [boxes]); 

  return (
    <div onClick={handleClick}>
      <input type="checkbox" value="5" />
      <label>5</label><br />
      <input type="checkbox" value="28" />
      <label>28</label><br />
    </div>
  );

};

ReactDOM.render(
  <Example />,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Abbasihsn · Accepted Answer · 2021-08-05 14:42:46Z

1

you can use this function to add, or remove a number (index) to/from String according to your pattern:

const updateString = (number, text)=>{
  if(text.includes(`${number}`)){
    if(text.includes(`,${number}`)){
      text = text.replace(`,${number}`,"");
    }else{
      text = text.replace(`${number},`,"");
    }
    
  } else {
    if(text===""){
      text = `${number}`;
    }else {
      text = text + `,${number}`;
    }
  }
  return text;
}

for example you can test it as follows:

const x = updateString(1,"");
console.log(x);
const y = updateString(5,x);
console.log(y);
const z = updateString(6,y);
console.log(z);
const a = updateString(1,z);
console.log(a);

answered Aug 5, 2021 at 14:42

Abbasihsn

2,1811 gold badge10 silver badges17 bronze badges

Comments

Harun Yilmaz · Accepted Answer · 2021-08-25 08:44:22Z

1

You can use Array.split(','), Array.indexOf() and Array.splice() to achieve such functionality as followings:

let items = '1'

function changeValue(elem){
  const itemsAsArray = items.split(',')
  const index = itemsAsArray.indexOf(elem.value)
  if(index === -1){
    itemsAsArray.push(elem.value)
  }else{
    itemsAsArray.splice(index,1)
  }
  
  items = itemsAsArray.join(',')
  console.log(items)
}

<input type="checkbox" value="28" onclick=changeValue(this)> 28
<br/>
<input type="checkbox" value="5" onclick=changeValue(this)> 5
<br/>

edited Aug 25, 2021 at 8:44

answered Aug 5, 2021 at 14:26

Harun Yilmaz

8,5793 gold badges30 silver badges40 bronze badges

Collectives™ on Stack Overflow

How do edit a string with a function in React

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related