REACT Component Lifecycle

//Implement a function which convert the given boolean value into its string representation.
//Note: Only valid inputs will be given.

function booleanToString(b){
  const b = new Boolean(true);
  
console.log(b.toString())
}

//Complete the method that takes a boolean value and return a "Yes" string for true, or a "No" string for false.

function boolToWord( bool ){
const str = bool === true ? "Yes" : "No"
return str
  }

//componentDidMount
useEffect(() => {
    console.log("Behavior before the component is added to the DOM");
  }, []);

//componentDidUpdate
useEffect(() => {
    console.log("Behavior when the component receives new state or props.");
  });

//Or

useEffect(() => {
    console.log("Behavior when the value of 'stateName' changes.");
  }, [stateName]);

//Or
import React, { useEffect, useRef } from "react"
const mounted = useRef()
useEffect(() => {
  if (!mounted.current) {
    // do componentDidMount logic
    mounted.current = true
  } else {
    // do componentDidUpdate logic
  }
})

//componentWillUnmount
useEffect(() => {
    return () => {
            console.log("Behavior right before the component is removed from the DOM.");
        }
  }, []);

//Putting it all together
  useEffect(() => {
    const intervalId = setInterval(() => {
      document.title = `Time is: ${new Date()}`;
    }, 1000);
 
    return () => {
      document.title = "Time stopped.";
      clearInterval(intervalId);
    }
  }, []);

const student = {
    name: 'Monica',
    class: 7,
    age: 12
}

// using for...in
for ( let key in student ) {

    // display the properties
    console.log(`${key} => ${student[key]}`);
}

const student = {
    name: 'Monica',
    class: 7,
    age: 12
}

// using for...in
for ( let key in student ) {

    // display the properties
    console.log(`${key} => ${student[key]}`);
}

	const { data: cryptoList, isFetching } = useGetCryptosQuery(count);
	const [cryptos, setCryptos] = useState([]);
	const [searchTerm, setSearchTerm] = useState("");

	useEffect(() => {
		setCryptos(cryptoList?.data?.coins);

		const filteredData = cryptoList?.data?.coins.filter((coin) =>
			coin.name.toLowerCase().includes(searchTerm.toLowerCase())
		);

		setCryptos(filteredData);
	}, [cryptoList, searchTerm]);

//Instead of writing
text += cars[0] + "<br>";
text += cars[1] + "<br>";
text += cars[2] + "<br>";

for (let i = 0; i < cars.length; i++{
  text += cars[i] + "<br>";
}
     
syntax: for(statement 1; statement 2; statement 3){
  //code block to be executed
}     
     
//Statement 1 initializes the variable used in the loop (let i = 0). Many values can be initiated (separated by coma)
     
//Statement 2 evaluates the condition of the inital value. If it returns true, the loop will start over again, if it returns false, the loop wil end
     
//Statement 3 increments the value of the inital variable. It can do anything like negative increment (i--), and positive increment (i = i +15)

//The JS "for in" statement loops through the properties of an Object:

//Syntax
for (key in object){
  //code block to be executed
}

const person = {first_name: "John", last_name: "Doe", age:25};

let text = "";
for (let x in person) {
  text += person[x]
}

//John Doe 25

// Example explained
-   The for in loop iterates over a person object
-   Each iteration returns a key (x)
-   The key is used to access the value of the key
-   The value of the key is person[x]

//For in over arrays
for (variable in array){
  code
}

const numbers = [45,4,9]

let txt = "";
for (let x in numbers){
  txt += numbers[x]
}

// 45
//  4
//  9

//NOTE: It is better to use a "for" loop, a "for of" loop, or "Array.forEach()" when the order matters


///Array.forEach()
//forEach() method calls a function (a callback function) once for each array element
const numbers = [45,4,9]

let txt = "" (or let arr = []);
numbers.forEach(myFunction);

function myFunction(value, index, array){
  txt += value;
}

// Setup
const myArray = [];

for(let i = 1;i<10; i +=2){
  myArray.push(i)
}

//While loop loops through a block of code as long as a specified condition is true

//Syntax
while (condition){
  //code block to be executed
}

while (i < 10){
  text += "The number is" +i;
ii+
}

//Very simple, given an integer or a floating-point number, find its opposite.
//Examples:
//1: -1
//14: -14
//-34: 34

function opposite(number){
let oppNum = 0 - number
return oppNum;
}

//Timmy & Sarah think they are in love, but around where they live, they will only know once they pick a flower each. If one of the flowers has an even number of petals and the other has an odd number of petals it means they are in love.

//Write a function that will take the number of petals of each flower and return true if they are in love and false if they aren't.




function lovefunc(flower1,flower2){
    if (flower1%2==0&&flower2%2!==0) {
        return true;
    }else if(flower1%2!==0&&flower2%2==0){
        return true;
    }else return false;
}

//  Best practice
//function lovefunc(flower1, flower2){
//  return flower1 % 2 !== flower2 % 2;
//}

//Write a function to convert a name into initials. This kata strictly takes two words with one space in between them.
//The output should be two capital letters with a dot separating them.
//It should look like this:
//Sam Harris => S.H
//patrick feeney => P.F

function abbrevName(name){
  let initials = name.split(" ")
  return initials[0].charAt(0).toUpperCase()+'.' + initials[1].charAt(0).toUpperCase(); 
    
}

//Build a function that returns an array of integers from n to 1 where n>0.Example : n=5 --> [5,4,3,2,1]


const reverseSeq = n => {
  
  let arr = [];
    for(let i=n; i>0;i--){
      arr.push(i)
    } return arr;
};
  

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

export default function App() {
  //  let arr = [A, B, C];

  const [item, setItem] = useState([]);

  useEffect(() => {
    axios.get("https://swapi.dev/api/planets/?page=2").then((item) => {
      console.log(item);
      setItem(item.data.results);
    });
  }, []);

  return (
    <div className="App">
      <ul>
        {item.map((planet) => {
          return <li>{planet.name}</li>;
        })}
      </ul>
    </div>
  );
}