React Code snippets

Lists & Arrays in React:

// Start

const languages = ['C', 'Python', 'Javascript', 'Php', 'Typescript', 'Kotlin']
languages.sort()
const listItems = languages.map(language => <li>{language}</li>)

// End

  // Start

const framworks = [ 
                    {id: 0, name: 'React', tech: 'Frontend'},
                    {id: 1, name: 'Angular', tech: 'Frontend'},
                    {id: 2, name: 'Vue.js', tech: 'Frontend'}, 
                    {id: 3, name: 'NodeJS', tech: 'Backend'}, 
                    {id: 4, name: 'Express.js', tech: 'Backend'} 
                ]; 

// Sorting Array
framworks.sort((a, b) => a.name.localeCompare(b.name))
framworks.sort((a, b) => b.name.localeCompare(a.name))
                               
const objectItems = framworks.map(framwork => <li key={framwork.id}>{framwork.name + " : " + framwork.tech}</li>

// End

// Start

const backendFramworks = framworks.filter(framework => framework.tech === "Frontend")
    
const objectItems = backendFramworks.map(framwork => <li key={framwork.id}>
                                        {framwork.name + " : " + framwork.tech}</li>
)

// End

Default Props & PropTypes:

// Start

List.propTypes = {
    category: PropTypes.string,
    items: PropTypes.arrayOf(PropTypes.shape({id: PropTypes.number, name: PropTypes.string, tech: PropTypes.string}))
}

List.defaultProps = {
    category: "category",
    items: [],
}

// End

Handling Events in React:

• Event with parameter:

let count = 0;
const handleClick = (name) => {
    if(count <3){
        count++;
        console.log(`${name} you clicked me ${count} time's`);
    } else {
        console.log(`${name} stop clicking me`);
    }
}


const Button = () => {
  return (
    <button onClick={() => handleClick("momo")}>Click me</button>
  )
}

• On Event Fired Changing Properties:

let active = false;
const handleClick = (e) => {
    if (!active) {
        console.log(e);
        e.target.textContent = "I am active";
        e.target.style.backgroundColor = "green";
        e.target.style.color = "white";
        e.target.style.padding = "10px 30px";
        active=true;
        const heading3Element = document.getElementById('heading3');
        heading3Element.style.display = "none";
        //document.getElementById('heading3').target.style.display ="none";
    } else {
        e.target.textContent = "I am deactivated";
        e.target.style.backgroundColor = "red";
        e.target.style.color = "white";
        e.target.style.padding = "10px 30px";
        active=false;
        const heading3Element = document.getElementById('heading3');
        heading3Element.style.display = "block";

    }
    

}