React state change - reactjs

Question

I am having difficulty in changing state. I would like to change the state with images in an array that has a corresponding description to the images in the array. On click on the chapter should bring up the image and the description. Could you tell me what I am doing wrong here? Ignore chapters 3-6 as I haven't populated that code.
import React from "react";
import {Component} from "react";
import Layout from "../components/layout";
import styles from "./book1.module.css";
import image1 from "../images/rainbow.jpg"
import image2 from "../images/rainbow2.jpg"
class book extends Component {
constructor() {
super();
this.state= {
index : 0,
images : [image1, image2],
ChapterDescriptions: ["chapter1","chapter2"]
}
}
chapter1=()=>{
this.setState({
index: this.state.images.index[0]
})
}
chapter2=()=>{
this.setState({
index: this.state.chapterImages[1]
})
}
chapter3=()=>{
this.setState({
index: this.state.chapter3.image
})
}
chapter4=()=>{
this.setState({
index: this.state.chapter4.image
})
}
chapter5=()=>{
this.setState({
index: this.state.chapter5.image
})
}
chapter6=()=>{
this.setState({
index: this.state.chapter6.image
})
}
render(){
return (
<Layout>
<div className={styles.container}>
<div className={styles.chapters}>
<h1>Anti-Children</h1>
<p>
Learn how our leaders subvert our children’s future and what you can
do to brighten it
</p>
<ul>
<br/>
<br/>
<li className={styles.description} onClick={this.chapter1} > aaaaaaa</li>
<li className={styles.description} onClick={this.chapter2}> bbbbbbbbb</li>
<li className={styles.description} onClick={this.chapter3}> ccccccccc</li>
<li className={styles.description} onClick={this.chapter4}> ddddddddd</li>
<li className={styles.description} onClick={this.chapter5}> eeeeeeeee</li>
<li className={styles.description} onClick={this.chapter6}> fffffffff</li>
</ul>
</div>
<div className={styles.bookimage}>
<img href="#" className={styles.chapterImage} src={this.state.images.index}/>
<div className={styles.textArea} > {this.state.ChapterDescriptions.index}</div>
</div>
</div>
</Layout>
)
}
}
export default book

Answer 1

I've edited and added some parts of the code.
1. You can render some looped tag using map()
{this.state.ChapterDescriptions.map((item,index)=>{
return <li className={style.description} onClick={()=>{handleIndex(index)}>{item}</li>
})
}
2. You can combine your click event for update the state
handleIndex = (index) => {
this.setState({ index: index });
}
3. etc.
<div className={styles.bookimage}>
<img href="#" className={styles.chapterImage} src={this.state.images[this.state.index]}/>
<div className={styles.textArea} > {this.state.ChapterDescriptions[this.state.index]}</div>
</div>
Full code
import React from "react";
import {Component} from "react";
import Layout from "../components/layout";
import styles from "./book1.module.css";
import image1 from "../images/rainbow.jpg"
import image2 from "../images/rainbow2.jpg"
class book extends Component {
constructor() {
super();
this.state= {
index : 0,
images : [image1, image2],
ChapterDescriptions: ["chapter1","chapter2"]
}
}
handleIndex = (index) => {
this.setState({ index: index });
}
render(){
return (
<Layout>
<div className={styles.container}>
<div className={styles.chapters}>
<h1>Anti-Children</h1>
<p>
Learn how our leaders subvert our children’s future and what you can
do to brighten it
</p>
<ul>
<br/>
<br/>
{
this.state.ChapterDescriptions.map((item,index)=>{
return <li className={style.description} onClick={()=>{handleIndex(index)}>{item}</li>
})
}
</ul>
</div>
<div className={styles.bookimage}>
<img href="#" className={styles.chapterImage} src={this.state.images[this.state.index]}/>
<div className={styles.textArea} > {this.state.ChapterDescriptions[this.state.index]}</div>
</div>
</div>
</Layout>
)
}
}
export default book

Answer 2

Please check this code with live example demo. if you want like this you can iterate through map instead of writing hard coded.
let data = [{id:1,chapter: "chapter 1", image:'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRZlA55Pm9_SZbN90fmVOYgldndkgqSv6k88kQMzvDh36i_no7J&s'},
{id:2,chapter: "chapter 2", image:'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQLZZPW62TuM_Qgtu8lMZJ1U9to8BM2A4dEmC27ZyDpzWq9ZAxe&s'},
{id:3,chapter: "chapter 3", image:'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRFnKI9xni86qgmhlkHTN6utr__NX_vtgzpQSVBsnKM0Zzb92pG4g&s'},
{id:4,chapter: "chapter 4", image:'https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Node.js_logo.svg/1200px-Node.js_logo.svg.png'},
{id:5,chapter: "chapter 5", image:'https://cdn2.iconfinder.com/data/icons/nodejs-1/512/nodejs-512.png'}]
class Book extends Component{
state={selected:''}
clickHandler=list=>{
this.setState({selected:list})
}
render(){
const {selected} =this.state;
return (
<div>
{data.map((d)=>
<p key={d.id} onClick={()=>this.clickHandler(d)}>
{d.chapter}
</p>
)}
<hr />
<h2>Please select an item from above list</h2>
{selected!==''&&<div>
<h3>{selected.chapter}</h3>
<img src={selected.image} alt="chapterimg"
style={{height:100,width:150}}/>
</div>}
</div>
)
}
}
check this for your reference Live demo

Answer 3

First, writing redundant <li> is not a good idea, you can change this by looping through a map function.
{
this.state.ChapterDescriptions.map((item,index)=>(
<li className={style.description} onClick={()=>this.setState({in
dex})}>
{item}
</li>)
}
and for showing the corresponding image
{
<div className={styles.bookimage}>
<img href="#" className={styles.chapterImage} src={this.state.images[this.state.index]}/>
<div className={styles.textArea} > {this.state.ChapterDescriptions[this.state.index]}</div>
</div>
}