- This repo contains my solutions for the [React & React Native challenges](https://coderbyte.com/challenges).

Refactored a few solutions.

Slight editing of `README`.

- Refactored all previous solutions to use React 18 and use .jsx/.tsx file extensions

- Redid solution for `tictactoe.jsx`

- Added new solutions for the following challenges:

- `color-dropdown.jsx`

- `letter-tiles.jsx`

- `live-paragraph.jsx`

- `quiz-builder.jsx`

- `weather-dashboard.jsx`

- Updated `README``

**Can you include the challenge's question in your solution?**

Unfortunately, no since I don't want to violate Coderbyte's [Terms of Use](https://coderbyte.com/terms). My solutions are only meant as a resource to check against your own or just to study from in general! You'll need to pay for Coderbyte to see the questions to their code challenges.

**Do you accept submissions for alternative solutions?**

No, not at this time. I originally intended to use this repo as a way to keep a copy of my solutions I wrote when I ended my Coderbyte subscription. However, since this repo has grown in popularity, if there is more interest to open this repo up and accept alternative solution submissions, I may consider this!

import React, { useState } from "react"

import { createRoot } from "react-dom/client"

const Toggle = () => {

const [toggle, setToggle] = useState(false)

const handleClick = () => {

setToggle(!toggle)

}

return (

<button type="button" onClick={handleClick}>

{toggle ? "ON" : "OFF"}

</button>

)

const root = createRoot(document.getElementById("root"))

root.render(<Toggle />)

import React, { useState } from "react"

import { createRoot } from "react-dom/client"

function ColorSelector() {

const colors = { red: "Red", blue: "Blue", green: "Green" }

const [color, setColor] = useState(colors.red)

const onChange = e => setColor(e.target.value)

return (

<>

<select onChange={onChange} value={color}>

<option value={colors.red}>{colors.red}</option>

<option value={colors.blue}>{colors.blue}</option>

<option value={colors.green}>{colors.green}</option>

</select>

{color && <p>{`You have selected: ${color}`}</p>}

</>

)

const root = createRoot(document.getElementById("root"))

root.render(<ColorSelector />)

import { createRoot } from "react-dom/client"

const MainSection = () => {

const toggleLanguage = () =>

currentIndex === languages.length - 1

? setLanguage(languages[0])

: setLanguage(languages[currentIndex + 1])

const App = () => {

const [language, setLanguage] = useState(languages[0])

return (

<LanguageContext.Provider value={{ languages, language, setLanguage }}>

<MainSection />

</LanguageContext.Provider>

)

const root = createRoot(document.getElementById("root"))

root.render(<App />)

import React, { useState, useCallback, useMemo } from "react"

import { createRoot } from "react-dom/client"

const style = {

letterContainer: {

overflow: "auto",

marginBottom: "10px",

display: "flex",

flexWrap: "wrap",

justifyContent: "center",

alignItems: "center",

},

letter: {

float: "left",

padding: "10px 10px",

background: "#c9e4ed",

borderRadius: "5px",

marginRight: "5px",

marginTop: "5px",

cursor: "pointer",

},

outputString: {

marginTop: "20px",

textAlign: "center",

},

const Tile = ({ letter, outputArray, setOutputArray, tally, setTally }) => {

const onClick = useCallback(() => {

if (!tally[letter]) {

setTally({ ...tally, [`${letter}`]: 1 })

setOutputArray([...outputArray, letter])

} else if (tally[`${letter}`] && tally[`${letter}`] === 2) {

setTally({ ...tally, [`${letter}`]: 0 })

const slicedArray = outputArray.slice(0, outputArray.length - 2)

setOutputArray([...slicedArray, "_"])

} else {

setTally({ ...tally, [`${letter}`]: tally[`${letter}`] + 1 })

setOutputArray([...outputArray, letter])

}

}, [letter, outputArray, setOutputArray, tally, setTally])

return (

<button type="button" onClick={onClick} style={style.letter}>

{letter}

</button>

)

const Application = () => {

const [outputArray, setOutputArray] = useState([])

const [tally, setTally] = useState({})

const alphabetArray = useMemo(() => {

let arr = []

for (let i = 65; i <= 90; i++) {

const char = String.fromCharCode(i)

arr.push(char)

}

return arr

}, [])

return (

<section>

<aside style={style.letterContainer} id="letterContainer">

{alphabetArray.map((letter, index) => (

<Tile

tally={tally}

setTally={setTally}

letter={letter}

key={index}

outputArray={outputArray}

setOutputArray={setOutputArray}

/>

))}

</aside>

<div style={style.outputString} id="outputString">

{outputArray.join("")}

</div>

</section>

)

const root = createRoot(document.getElementById("root"))

root.render(<Application />)

import React from "react"

import { createRoot } from "react-dom/client"

const data = [

{ name: "Daniel", age: 25 },

{ name: "John", age: 24 },

{ name: "Jen", age: 31 },

const DataItem = ({ name, age }) => (

<li>

<span>{`${name} `}</span>

<span>{age}</span>

</li>

const DataList = ({ data }) => (

<div>

<h2>Data List</h2>

<ul>

{data.map((dataItem, index) => (

<DataItem

name={dataItem.name}

age={dataItem.age}

key={`data-item-${index}`}

/>

))}

</ul>

</div>

const root = createRoot(document.getElementById("root"))

root.render(<DataList data={data} />)

import React, { useState } from "react"

import { createRoot } from "react-dom/client"

function LiveText() {

const [text, setText] = useState("")

const onChange = ({ target: { value } }) => {

setText(value)

}

return (

<>

<input type="text" onChange={onChange} value={text} />

<p>{text}</p>

</>

)

const root = createRoot(document.getElementById("root"))

root.render(<LiveText />)