CODEWITHSUNDEEP
reactjsreact-hookscomponents
lache
lache

Reputation: 830

Convert Class component to functional using hooks

I am trying to convert this to functional component using hooks but not having luck. How would I do this? (new to hooks). I have tried to follow documentation but I must not be understanding it. This should work the same way but with functional component using hooks.

import React, { Component } from "react";

    const texts = [
  ['Text 1', 'blah', 'sdklfj'],
  ['Text 2', 'blah', 'sdklfj'],
  ['Text 3', 'blah', 'sdklfj'],
  ['Text 4', 'blah', 'sdklfj'],
];


export default class Testing extends Component {
  constructor(props) {
    super(props);
    this.state = {
      clickedText: [],
    };
  }

  handleClick = (i) => {
    this.setState({ clickedText: texts[i] });
  };

  render() {
    const { clickedText } = this.state;
    return (
      <div>
        {texts.map((text, i) => (
          <button key={i} onClick={() => this.handleClick(i)}>
            Click me {i + 1}
          </button>
        ))}
        {clickedText.length > 0 && <p>I clicked on button with text:</p>}
        <ul>
          {clickedText.map((t, i) => (
            <li key={`text-${i}`}>{t}</li>
          ))}
        </ul>
      </div>
    );
  }
}

Upvotes: 1

Views: 65

Answers (3)

FunkeyFlo
FunkeyFlo

Reputation: 295

import React, { useState } from 'react';

const texts = [
    ['Text 1', 'blah', 'sdklfj'],
    ['Text 2', 'blah', 'sdklfj'],
    ['Text 3', 'blah', 'sdklfj'],
    ['Text 4', 'blah', 'sdklfj'],
];

const Testing = (props) => {
    // useState is the function component equivalent of the inherited 'setState'
    const [clickedText, setClickedText] = useState([]);

    const handleClick = (i) => {
        setClickedText(texts[i]);
    };

    return (
        <div>
            {texts.map((text, i) => (
                <button key={i} onClick={() => handleClick(i)}>
                    Click me {i + 1}
                </button>
            ))}
            {clickedText.length > 0 && <p>I clicked on button with text:</p>}
            <ul>
                {clickedText.map((t, i) => (
                    <li key={`text-${i}`}>{t}</li>
                ))}
            </ul>
        </div>
    );
};

export default Testing;

Upvotes: 2

ahmetkilinc
ahmetkilinc

Reputation: 684

learn how to use useState, useRef, useEffect. in your example you dont need useEffect but you will need it.

here is your code with hooks:

import { useRef, useState } from "react";
import "./styles.css";

export default function App() {
   const [clickedText, setClickedText] = useState([]);
   const texts = useRef([
     ["Text 1", "blah", "sdklfj"],
     ["Text 2", "blah", "sdklfj"],
     ["Text 3", "blah", "sdklfj"],
     ["Text 4", "blah", "sdklfj"]
]);

const handleClick = (i) => {
   setClickedText(texts.current[i]);
 };

 return (
    <div>
      {texts.current.map((text, i) => (
         <button key={i} onClick={() => handleClick(i)}>
             Click me {i + 1}
         </button>
      ))}
      {clickedText.length > 0 && <p>I clicked on button with text:</p>}
      <ul>
          {clickedText.map((t, i) => (
             <li key={`text-${i}`}>{t}</li>
          ))}
      </ul>
      </div>
 );
 }

https://codesandbox.io/s/hidden-waterfall-s0t0m?file=/src/App.js

Upvotes: -1

alisasani
alisasani

Reputation: 2968

First of all, you need to replace the current state in class components with the useState feature of the functional components. Please also read the doc of react about using the state in functional components. sandbox

import React, { useState } from "react";

const texts = [
  ["Text 1", "blah", "sdklfj"],
  ["Text 2", "blah", "sdklfj"],
  ["Text 3", "blah", "sdklfj"],
  ["Text 4", "blah", "sdklfj"]
];

const Testing = (props) => {
  const [clickedText, setClickedText] = useState([]);

  const handleClick = (i) => {
    setClickedText(texts[i]);
  };

  return (
    <div>
      {texts.map((text, i) => (
        <button key={i} onClick={() => handleClick(i)}>
          Click me {i + 1}
        </button>
      ))}
      {clickedText.length > 0 && <p>I clicked on button with text:</p>}
      <ul>
        {clickedText.map((t, i) => (
          <li key={`text-${i}`}>{t}</li>
        ))}
      </ul>
    </div>
  );
};

export default Testing;

Upvotes: 0

Related Questions