display selected row of json data in reactjs-CodePudding

guys I want to show any of the records in JSON data one by one without using map but when I start using [] the react app stop working what is my problem, i used {news[0].title} but i dont know whats wrong about it, the code is:

function News() {
    const [news, fetchnews] = useState([]);
    const getData = () => {
          fetch('https://example.com/v1/news/list/fa/1')
          .then((res) => res.json())
          .then((res) => {
            console.log(res);
            fetchnews(res?.news);
          });
    };
    useEffect(() => {
      getData()
    }, [])
    return (
        <section id="news">
            <div className="container-fluid">
              <div className="headline-news row">
                  <div className="col-12 col-lg-6 col-sm-12 col-md-12 headline-text">
                  <h2>اخبار</h2>
                  <h1>{news[0].title}</h1>
                  <p>{news[0].short}</p>
                  <a className="headline-btn btn btn-primary btn-lg" href="#" role="button">ادامه مطلب</a>
                  </div>
                  <div className="col-12 col-lg-4 col-sm-12 col-md-12 headline-img">
                  <img className="figure-img" src={news[0].image} alt=""/>
                  <a href="#">آرشیو کامل اخبار</a>
                  </div>
              </div>
              <div className="breaking-news row">
                  <div className="news-items align-items-center col-12 col-lg-4 col-xxl-4 col-xl-4 col-sm-12 col-md-12">
                  <h3>{news[1].title}</h3>
                  <p>{news[1].short}</p>
                  </div>      
                  <div className="news-items align-items-center col-12 col-lg-4 col-xxl-4 col-xl-4 col-sm-12 col-md-12">
                  <h3>{news[2].title}</h3>
                  <p>{news[2].short}</p>
                  </div>       
                  <div className="news-items align-items-center col-12 col-lg-4 col-xxl-4 col-xl-4 col-sm-12 col-md-12">
                  <h3>{news[3].title}</h3>
                  <p>{news[3].short}</p>
                  </div>
              </div>
            </div>
        </section>
    );
  }
  
  export default News; ```

help me with this problem guys is there any resource to give complete and fixed details about JSON and JSON files and how we can use it?

CodePudding user response：

Check If the data is available or not in every place.

function News() {
    const [news, fetchnews] = useState([]);
    const getData = () => {
          fetch('https://example.com/v1/news/list/fa/1')
          .then((res) => res.json())
          .then((res) => {
            console.log(res);
            fetchnews(res?.news);
          });
    };
    useEffect(() => {
      getData()
    }, [])
    return (
        <section id="news">
            <div className="container-fluid">
              <div className="headline-news row">
                  <div className="col-12 col-lg-6 col-sm-12 col-md-12 headline-text">
                  <h2>اخبار</h2>
                  <h1>{news.length && news[0]?.title}</h1>
                  <p>{news.length && news[0]?.short}</p>
                  <a className="headline-btn btn btn-primary btn-lg" href="#" role="button">ادامه مطلب</a>
                  </div>
                  <div className="col-12 col-lg-4 col-sm-12 col-md-12 headline-img">
                  <img className="figure-img" src={news.length && news[0]?.image} alt=""/>
                  <a href="#">آرشیو کامل اخبار</a>
                  </div>
              </div>
              <div className="breaking-news row">
                  <div className="news-items align-items-center col-12 col-lg-4 col-xxl-4 col-xl-4 col-sm-12 col-md-12">
                  <h3>{news.length && news[1]?.title}</h3>
                  <p>{news.length && news[1]?.short}</p>
                  </div>      
                  <div className="news-items align-items-center col-12 col-lg-4 col-xxl-4 col-xl-4 col-sm-12 col-md-12">
                  <h3>{news.length && news[2]?.title}</h3>
                  <p>{news.length && news[2]?.short}</p>
                  </div>       
                  <div className="news-items align-items-center col-12 col-lg-4 col-xxl-4 col-xl-4 col-sm-12 col-md-12">
                  <h3>{news.length && news[3]?.title}</h3>
                  <p>{news.length && news[3]?.short}</p>
                  </div>
              </div>
            </div>
        </section>
    );
  }
  
  export default News;

The second Best Solution is that use the slice method

{[...news.slice(1)].map((data ,index)=>{
const {title , short} = data
return (
    <div className="breaking-news row">
                      <div className="news-items align-items-center col-12 col-lg-4 col-xxl-4 col-xl-4 col-sm-12 col-md-12">
                      <h3>{title}</h3>
                      <p>{short}</p>
                      </div>
)})         
}