Can't use imported randomColor function in react component

September 12, 2022

I am trying to build a random color generater with the randomcolor npm package. When a button is clicked a div should change its color randomly. But react doesn’t let me use the randomColor function inside of my reatc component and I don’t know why.

import './App.css';
import randomColor from 'randomcolor';
import { useState } from 'react';
import styled from 'styled-components';

function App() {
  const [randomColor, setRandomColor] = useState('white');

  const Generated = styled.div`
    background-color: ${randomColor};
    transition: all 0.3s;
    padding: 4rem 8rem;
    border-radius: 10px;
  `;
  return (
    <Container className="App">
      <Button
        onClick={() => setRandomColor(randomColor({luminosity: "random", hue:"random"}))}
        className="generate"
      >
        Generate
      </Button>
      <Generated>Generated Color: {randomColor}</Generated>
    </Container>
  );
}

export default App;

Does anyone know why it says "randomColor" is declared but never used and why I can’t use it in my component?

>Solution :

you have silly mistake, change your randomColor and SetRandomColor name javascript confused by the same name with randomColor() function is this correct of your code :

import './App.css';
import randomColor from 'randomcolor';
import { useState } from 'react';
import styled from 'styled-components';

function App() {
  const [randomColor2, setRandomColor2] = useState('white');

  const Generated = styled.div`
    background-color: ${randomColor};
    transition: all 0.3s;
    padding: 4rem 8rem;
    border-radius: 10px;
  `;
  return (
    <Container className="App">
      <Button
        onClick={() => setRandomColor2(randomColor({luminosity: "random", hue:"random"}))}
        className="generate"
      >
        Generate
      </Button>
      <Generated>Generated Color: {randomColor2}</Generated>
    </Container>
  );
}

export default App;