Just One Yesterday

Hello, this is Laura, and this is a blog repurposed to record my coding journey!

[oneyesterday]

Responsive Navbar with React

This was so frustrating, I wanted to cry. I took about 2 full days wondering why my collapsed bar wouldn't "fully display itself" if the window was maxed out. I messed around with a lot of class conditionals, and I finally am getting somewhere, but it's been hazy and I don't remember why some of the things I chose to do worked, so I have to piece it together again in here.

WILL PUT STUFF HERE LATER

[oneyesterday]

Mapping Array of Images

I finally found a tutorial that allows me to access individual properties of an array without selecting the entire mapped array. It took me an entire week to find a tutorial that made sense to me - and it's actually sad because I did see the video before, but didn't understand it until after I looked through other peoples' tutorials and tried to learn from them. I guess this is the process, but it is good that I can continue. I was half about to give up and beg a friend of mine to just give me a solution, but finding the answer was a bit rewardable.

To help reinforce my brain, I will post the code with fake information!

export default function Gallery(){

let images = [img1, img2, img3];

let [selectedImage, setSelectedImage] = useState([images[0]);

//This is the simple setup of an array of images. I used the react hook, useState and made variables of 'selectedImage' and 'setSelectedImage' to help me interchange information!

return (

<div>

<div className="main-picture">

<img src={selectedImage} className="main" alt="main" />

</div>

//The first div is created to store the main image of the gallery. It's image source is the variable 'selectedImage' because I plan to change it in the future with a 'setSelectedImage' state.

<div className = "gallery-section">

{images.map((image, index){

<div key={index}>

<img src={image} onClick ={()=> setSelectedImage(image)} alt={index} style={{opacity: selectedImage === image ? 0.7 : ""/>

</div>)}

//The second div is used to create a small thumbnail gallery of all the images in the array. In order to change the FIRST div's image with the SECOND div's image, I must use a function between them. In this case, I used onClick with an arrow function and gave it the variable 'setSelectedImage(image)' It seems to be better to use an arrow function as it will allow easier access to the data in the SECOND div, as it the coding hierarchy from upper to lower code prevents the 'image' source in 'setSelectedImage' from being used.

//Then I used a ternary condition to select the appropriate opacity! And then all done!

</div>)}