Refresh a function following modifications to an array (such as exchanging values)

Question

Refresh a function following modifications to an array (such as exchanging values)

Looking to re-render a function after swapping array values, but the useEffect hook is not triggering it. I need assistance with this as I plan to integrate this code into my main project. Below are the JSX and CSS files attached. In App.js, I am creating a bar graph using an array and attempting to re-render the bar() function after value swaps.

import './App.css';
import "./components/Bar";
import Bar from './components/Bar';
import Footer from './components/Footer';
import Header from './components/Header';
import {useEffect} from 'react';

function App() {
  function bar(){
    return (
      arr.map((val, idx) => (
        <div
          className='element-bar'
          
          style={{
            height: `${val}px`,
            width: `${wid}px`,
            backgroundColor: "red",
            WebkitTransition: `background-color ${delay}ms linear`,
            msTransition: `background-color ${delay}ms linear`,
            transition: `background-color ${delay}ms linear`,
            transition: `${delay}ms`
          }} >
        </div>
      ))
    )
  }
  var arr = [10, 20, 30, 40, 50, 60];
  useEffect(() => {
    console.log(1);
    bar();
  },[arr,bar]);
  function swap(x,y){
    var t = x;
    x = y;
    y = t;
  }
  function change(){
    console.log(arr);
    swap(arr[0],arr[4]);
   }
  
  const wid = 4;
  const delay = 2;
  return (
    <div>
      <Header/>
      <button onClick={change} style={{ color: 'red' }}>Swap</button>
      <Bar/>
      <div className='array'>
        {
          bar()
        }
      </div>
      <Footer/>
    </div>
  );
}

export default App;

CSS

body {
    background-color: black;
}
.array {
    position: fixed;
    text-align: center;
    left: 250px;
    top: auto;
    bottom: 50px;
    display: flex;
    align-items: flex-end;
    flex-wrap: nowrap;
    width: 1260px;
}

.element-bar {
    display: inline-block;
    margin: 0 auto;
}

.sideNavbar {
    text-align: center;
    height: 100%;
    width: 210px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgb(29, 29, 29);
    overflow-x: hidden;
    padding-top: 20px;
    box-shadow: 0 4px 8px 0 rgba(81, 81, 81, 0.7), 0 6px 20px 0 rgb(81, 81, 81,0.7);
}

.sideNavbar h3 {
    font-size: 23px;
    text-decoration: underline;
    color: #818181;
    display: block;
    transition: 0.4s;
}

.sideNavbar h3:hover {
    color: #f1f1f1;
}

.sliderLabel {
    color: #f1f1f1;
}

.btn {
    margin: 10px 0;
    display: inline-block;
    padding: 6px;
    width: 100px;
    color: #818181;
    font-weight: 400;
    border: 2px solid #818181;
    background-color: transparent;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 100px;
    transition: 0.4s;
}

.btn:hover {
    color: #f1f1f1;
    border: 2px solid #f1f1f1;
    box-shadow: 0 12px 16px 0 rgba(81, 81, 81, 0.7), 0 17px 50px 0 rgba(81, 81, 81, 0.7);
    text-shadow: 0 12px 16px 0 rgba(81, 81, 81, 0.7), 0 17px 50px 0 rgba(81, 81, 81, 0.7);
}

.btndisabled {
    margin: 10px 0;
    display: inline-block;
    padding: 6px;
    width: 100px;
    border-radius: 100px;
    font-weight: 400;
    background-color: transparent;
    cursor: not-allowed;
    text-transform: uppercase;
    color: #f1f1f1;
    border: 2px solid #f1f1f1;
    box-shadow: 0 12px 16px 0 rgba(81, 81, 81, 0.7), 0 17px 50px 0 rgba(81, 81, 81, 0.7);
    text-shadow: 0 12px 16px 0 rgba(81, 81, 81, 0.7), 0 17px 50px 0 rgba(81, 81, 81, 0.7);
}

javascript css reactjs react-hooks

Answer 1

Answer №1

Give this a try

const defaultFunction = () => {
  const [array, setArray] = React.useState([10, 20, 30, 40, 50, 60])

  const swapItems = (item1, item2) => {
    let clonedArray = [...array]
    const temporary = clonedArray[item1]
    clonedArray[item1] = clonedArray[item2]
    clonedArray[item2] = temporary
    setArray(clonedArray)
  }

  const width = 4
  const timingDelay = 2

  return (
    <div>
      <button onClick={() => swapItems(0, 4)} style={{ color: 'red' }}>
        Swap
      </button>
      <div className="array">
        {array.map((value, index) => {
          console.log(value)
          return (
            <div
              className="element-bar"
              key={index}
              style={{
                height: `${value}px`,
                width: `${width}px`,
                backgroundColor: 'red',
                WebkitTransition: `background-color ${timingDelay}ms linear`,
                msTransition: `background-color ${timingDelay}ms linear`,
                transition: `background-color ${timingDelay}ms linear`,
                transition: `${timingDelay}ms`
              }}></div>
          )
        })}
      </div>
    </div>
  )
}

Answer 2

Give this a try

const defaultFunction = () => {
  const [array, setArray] = React.useState([10, 20, 30, 40, 50, 60])

  const swapItems = (item1, item2) => {
    let clonedArray = [...array]
    const temporary = clonedArray[item1]
    clonedArray[item1] = clonedArray[item2]
    clonedArray[item2] = temporary
    setArray(clonedArray)
  }

  const width = 4
  const timingDelay = 2

  return (
    <div>
      <button onClick={() => swapItems(0, 4)} style={{ color: 'red' }}>
        Swap
      </button>
      <div className="array">
        {array.map((value, index) => {
          console.log(value)
          return (
            <div
              className="element-bar"
              key={index}
              style={{
                height: `${value}px`,
                width: `${width}px`,
                backgroundColor: 'red',
                WebkitTransition: `background-color ${timingDelay}ms linear`,
                msTransition: `background-color ${timingDelay}ms linear`,
                transition: `background-color ${timingDelay}ms linear`,
                transition: `${timingDelay}ms`
              }}></div>
          )
        })}
      </div>
    </div>
  )
}

Answer 3

Answer №2

When working with React, it's important to remember that simply mutating an array or other data won't automatically trigger a re-render of your components. To ensure that React recognizes these changes, you should utilize useState. Additionally, consider using useCallback/useMemo to encapsulate functions and components defined within another component for better performance.

// Place useState at the beginning of your App() component
const [arr, setArr] = useState([10, 20, 30, 40, 50, 60]);
const bar = useCallback(() => {
    return (
    // ...
    )
}, [])
const swap = useCallback((x,y) => {
  var t = x;
  x = y;
  y = t;
}, [])
const change = useCallback(() => {
    console.log(arr);
    const newArr = [...arr]
    swap(newArr[0],newArr[4]);
    setArr(newArr) // Signaling React that the array has been updated and components need to be re-rendered
}, [])
// ...

Answer 4

When working with React, it's important to remember that simply mutating an array or other data won't automatically trigger a re-render of your components. To ensure that React recognizes these changes, you should utilize useState. Additionally, consider using useCallback/useMemo to encapsulate functions and components defined within another component for better performance.

// Place useState at the beginning of your App() component
const [arr, setArr] = useState([10, 20, 30, 40, 50, 60]);
const bar = useCallback(() => {
    return (
    // ...
    )
}, [])
const swap = useCallback((x,y) => {
  var t = x;
  x = y;
  y = t;
}, [])
const change = useCallback(() => {
    console.log(arr);
    const newArr = [...arr]
    swap(newArr[0],newArr[4]);
    setArr(newArr) // Signaling React that the array has been updated and components need to be re-rendered
}, [])
// ...

Refresh a function following modifications to an array (such as exchanging values)

Answer №1

Answer №2

Similar questions

Error: AppModule requires an array of arguments in order to function properly

Webhost sending information to Windows sidebar gadget

What is the best way to keep calling an AJAX function until it receives a response from a previous AJAX call

Best Way to Eliminate "#" Symbol from URL Address in UI-Router

The many potentials of looping through Sass maps

Remove the presence of a black square when selecting elements using CSS

What is the best way to create a vertical connector line between Material UI icons in a list of list items?

What is the best way to upload a file to Firebase Storage using React?

Run module following a POST request

What is the best method to retrieve a nested JSON property that is deeply embedded within

The Beginner's Guide to Mastering Ajax and Grails

Can the transition of the Chakra UI Menu component be customized?

Something is not quite right when the page is loading in a Ruby on Rails application

I have the latitude and longitude for both the shop and user, and I am looking to display a list of shops in order based

Issue with ReactJS Typescript: Cannot assign type 'number' to type '0, 8, 16, 24, 32, 40, or undefined'

Unable to reach elements that have been loaded through ajax with jQuery

Search for Azure Time Series Insights (TSI) data insights

Inspect the render function in the 'RestApi' class

Implement tooltip functionality in ssr chart using echarts

Update a Div, Table, or TR element without the need for a page reload or Ajax usage