state

1)
import React  from "react";
import Header from "./Components/Header";
import Meme from "./Components/Meme.js";

export default function App(){
 
 
 const [count ,setCount ]=React.useState(0)

  function add(){
    setCount(function(oldValue){
      return oldValue + 1
    })
  }
  function sub(){
    setCount(oldvalue => oldvalue -1)
  }
return <div>
  <div>
    <h1>Add or Subtract </h1>
    <h1 onClick={add}>+</h1>
    <button>{count}</button>
    <h1 onClick={sub}>-</h1>
  <h2></h2>
  </div>
</div>
}






///// ///    another user of state different method  ////////////
2)

import React  from "react";

export default function App(){
const [IsExited , ChangeFunction ]= React.useState(true)

  return <div>
    <div>are you feelling exited to learn reat </div>
    <div></div>
    <div onClick={() => { ChangeFunction(prestate => !prestate)}}>{IsExited === true ? "yes" :"no"}</div>
  </div>
}

// the above expression is done in short hand properties of the followind code

// function onclickHere(){
//   changeFunction(prestate =>!prestate)
// }








//////using state inside state (state bhitra state) to add the items in react /////////
3)
import React  from "react";

 export default function Test(){

  // using state
  const [ThingsArray, setThingsElement] = React.useState(["things 1" ,"things 2", "things 3"])

const thingsElemtnt = ThingsArray.map( Things => <p key={Things}>{Things}</p>)
function addItems(){
    setThingsElement(prestate => {
      return[...prestate , `things ${ThingsArray.length + 1}`]
    })
    

                  //  Here meaning of  ...prestate is spreading the pre existing array 
}

  return <div>
    <button  onClick={addItems}>Click</button>
    {thingsElemtnt}
  </div>
}





4)
////// building a meme generator Complex state :Object ///////   state with object
import React from 'react'

export default function Apps(){

  const [contact ,setContact] = React.useState({
    firstName : "Padam",
    lastName : "Damai",
    phone : "984089821",
    email : "padamdamai888@gmail.com",
    isFavourite : false
  })
let starIcon = contact.isFavourite? "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Full_Star_Yellow.svg/800px-Full_Star_Yellow.svg.png":"https://clipart-library.com/images/LcdoE7Ebi.gif" 
  return <main>
    <article>
      <img src= "https://clipart-library.com/images/kTKo7BB8c.png"  className='article-image'/>
      <div className='card-info'>
        <img  className='star-img' src={starIcon}/>
        <h1 className='card-name'>{contact.firstName} {contact.lastName}</h1>
       <div className='card-small-contact'>
       <p className="card-contact">{contact.phone}</p>
        <div className='card-gmail'>{contact.email}</div>
       </div>
      </div>
    </article>
  </main>

}




5)
// updating state object

import React from 'react'

export default function Apps(){

  const [contact ,setContact] = React.useState({
    firstName : "Padam",
    lastName : "Damai",
    phone : "984089821",
    email : "padamdamai888@gmail.com",
    isFavourite : false
  })
  function ToggleIcon(){
    setContact(preContact => {
     return {

      // firstName : "Padam",
      // lastName : "Damai",
      // phone : "984089821",
      // email : "padamdamai888@gmail.com",
      // isFavourite : false
      // isFavourite : !preContact.isFavourite

      ...preContact, // expandng the contact information or including the content  (if we didnt include this code than there wont be any content displayed)
      isFavourite : !preContact.isFavourite
     }
    })
    // this is obtainer as similar as the above given
  }
let starIcon = contact.isFavourite? "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Full_Star_Yellow.svg/800px-Full_Star_Yellow.svg.png":"https://clipart-library.com/images/LcdoE7Ebi.gif" 
  return <main>
    <article>
      <img src= "https://clipart-library.com/images/kTKo7BB8c.png"  className='article-image'/>
      <div className='card-info'>
        <img  className='star-img' onClick={ToggleIcon} src={starIcon}/>
        <h1 className='card-name'>{contact.firstName} {contact.lastName}</h1>
       <div className='card-small-contact'>
       <p className="card-contact">{contact.phone}</p>
        <div className='card-gmail'>{contact.email}</div>
       </div>
      </div>
    </article>
  </main>

}



////////////////////// using props and state in above program i.e(5)


/////////new file StarSelect.js file created 

import React from "react";

export default function Star(props){
    const starIcon =  props.isFilled? "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Full_Star_Yellow.svg/800px-Full_Star_Yellow.svg.png":"https://clipart-library.com/images/LcdoE7Ebi.gif" 

return <div>
 <img  className='star-img' onClick={props.handleClick} src={starIcon}/>
</div>
}

///////////main files app.js 
import React from 'react'
import Star from './Components/StarSelect.js'
export default function Apps(){

  const [contact ,setContact] = React.useState({
    firstName : "Padam",
    lastName : "Damai",
    phone : "984089821",
    email : "padamdamai888@gmail.com",
    isFavourite : false
  })
  function ToggleIcon(){
    setContact(preContact => {
     return {
      ...preContact, // expandng the contact information or including the content  (if we didnt include this code than there wont be any content displayed)
      isFavourite : !preContact.isFavourite
     }
    })
    // this is obtainer as similar as the above given
  }
// let starIcon = contact.isFavourite? "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Full_Star_Yellow.svg/800px-Full_Star_Yellow.svg.png":"https://clipart-library.com/images/LcdoE7Ebi.gif" 
  return <main>
    <article>
      <img src= "https://clipart-library.com/images/kTKo7BB8c.png"  className='article-image'/>
      <div className='card-info'>
        {/* <img  className='star-img' onClick={ToggleIcon} src={starIcon}/> */}
        <Star isFilled={contact.isFavourite} handleClick= {ToggleIcon}/>
        <h1 className='card-name'>{contact.firstName} {contact.lastName}</h1>
       <div className='card-small-contact'>
       <p className="card-contact">{contact.phone}</p>
        <div className='card-gmail'>{contact.email}</div>
       </div>
      </div>
    </article>
  </main>

}