This code throws error while used in react saying 'target' is undefined

JavaScript
#1 
function handleSliderChange({ target }) {
    setOptions((prevOptions) => {
      return prevOptions.map((option, index) => {
        if (index !== selectedOptionIndex) return option;
        return { ...option, value: target.value };
      });
    });
  }
1 Like
#2

where are you using this function? the error would be from there probably

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

1 Like
#3

I am using it in a basic react application and the error lies in this code block only , it says that ‘target’ of ‘undefined’ is undefined.
I think there is something wrong with {target}

1 Like
#4

There is something wrong with destructuring . see

Screenshot (81)
Screenshot (81)1920×1080 180 KB

1 Like
#6

Please copy-paste the code into a post instead of using screenshots. Screenshots are hard to read.

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

1 Like
#7

HERE"S THE APP.js FILE

import React, { useState } from "react";
import "./App.css";
import Slider from "./components/Slider";
import SidebarComponent from "./components/SidebarComponent";

const DEFAULT_OPTIONS = [
  {
    name: "Brightness",
    property: "brightness",
    value: 100,
    range: {
      min: 0,
      max: 200,
    },
    unit: "%",
  },
  {
    name: "Contrast",
    property: "contrast",
    value: 100,
    range: {
      min: 0,
      max: 200,
    },
    unit: "%",
  },
  {
    name: "Saturation",
    property: "saturate",
    value: 100,
    range: {
      min: 0,
      max: 200,
    },
    unit: "%",
  },
  {
    name: "Grayscale",
    property: "grayscale",
    value: 0,
    range: {
      min: 0,
      max: 100,
    },
    unit: "%",
  },
  {
    name: "Sepia",
    property: "sepia",
    value: 0,
    range: {
      min: 0,
      max: 100,
    },
    unit: "%",
  },
  {
    name: "Hue Rotation",
    property: "hue-rotate",
    value: 0,
    range: {
      min: 0,
      max: 360,
    },
    unit: "deg",
  },
  {
    name: "Blur",
    property: "blur",
    value: 0,
    range: {
      min: 0,
      max: 20,
    },
    unit: "px",
  },
];

function App() {
  const [options, setOptions] = useState(DEFAULT_OPTIONS);
  const [selectedOptionIndex, setSelectedOptionIndex] = useState(0);
  const selectedOption = options[selectedOptionIndex];

  function handleSliderChange({ target }) {
    setOptions((prevOptions) => {
      return prevOptions.map((option, index) => {
        if (index !== selectedOptionIndex) return option;
        return { ...option, value: target.value };
      });
    });
  }

  function imageStyleFunction() {
    const filters = options.map((option) => {
      return `${option.property}(${option.value}${option.unit})`;
    });

    return { filter: filters.join("") };
  }
  return (
    <div className="container">
      <div className="image-container" style={imageStyleFunction()} />
      <div className="sidebar">
        {options.map((option, index) => {
          return (
            <SidebarComponent
              name={option.name}
              key={index}
              active={index === selectedOptionIndex}
              handleClick={() => setSelectedOptionIndex(index)}
            />
          );
        })}
      </div>
      <Slider
        min={selectedOption.range.min}
        max={selectedOption.range.max}
        value={selectedOption.value}
        handleChange={handleSliderChange()}
      />
    </div>
  );
}

export default App;
#8

I see it used here, no argument, so you are trying to take the property target of undefined

#9

how to fix this , i want to acess target property of event object

#10

You should just pass it as a handler, not invoke it.

handleChange={handleSliderChange}

Then you will get access to the event which you can then get the target off of.

#11

it didn’t worked properly the app loads without any error , but the app is’nt working
thanks anyways for your help :slight_smile: