How to change an icon within a React application?

Question

Talk guys, everything jewels?

I have tremendous doubt, and I have no idea how to fix it. I recently participated in Omnistack Week 11 and was able to develop an application from scratch, from backend to frontend and mobile, and today (02/04/2020) I decided to add a dark theme in the application, this feature is working 100%, but I’m having trouble changing the icon I’m using to use the "dark theme feature". I wonder how do I put a "sun icon(symbolizing the light theme)" as soon as I click on the "moon(symbolizing the dark theme)"?.

Follow the excerpt of the code that makes the magic happen:

import React from 'react';
import {FiSun, FiMoon} from 'react-icons/fi';

import './style.css';

const ThemeSwitcher = ( {toggleTheme} ) => (
  <a onClick={toggleTheme}><FiMoon size={16} color="#343746"/></a>
);

As you can see in the code above, I am importing two icons from the 'React-icons/fi' library. Also note that I am using the "Fimoon" tag 'a'. Basically this code is essential for the dark theme feature to work as it is by clicking on this link/icon that the theme is applied.

The CSS file does not contain anything relevant, just a 'cursor: inter;'.

As you can see in the image below the moon icon is next to the logo, and as soon as it is clicked the dark theme is applied:

As you can see the theme has been applied but the moon icon has disappeared because it is the same color as the background, so I want to put the sun icon to symbolize the light theme:

From now on, thank you.

Answer 1

It can be created a variable of local state of the component and when clicking on the icon the value is changed to appear the sun, in your code need then change this mechanism, an example outside of your would be like this:

function ChangeIcone({status}) {
  const [ico, setIco] = React.useState(status);  
  return (   
    <div>
      <a 
        onClick={e => setIco(!ico)} 
        href="javascript:;"
        style={{textDecoration:'none', color:'black'}}
      >
       <i 
        class={ico?"zmdi zmdi-image-o":"zmdi zmdi-image"}>
       </i>      
      </a>
    </div>
  )
}
function App() { 
  return (
    <div>
      <p>Clique na ícone</p>
      <hr />
      <ChangeIcone status={true} />
    </div>
  )
 }
 ReactDOM.render( <App/> , document.getElementById('root'));

<link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css" rel="stylesheet"/>

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

exactly in your code something like this:

const ThemeSwitcher = ( {toggleTheme, ico} ) => (
  <a onClick={toggleTheme}>
    {ico ? (<FiMoon size={16} color="#343746"/>)
         : (<FiSun size={16})}
  </a>
);

being the passage of props from the component using it.

^{Observing: I didn’t put the color on the second icon because I don’t know visually what it would be, and the variable ico can be true or false (boolean).}